I’ve recently asked about this issue, but I am still facing problems with video autoplay on mobile devices. While my code works on certain phones, on others, the video remains paused, and users have to tap the screen to start the video.
Here’s what I’ve tried so far:
- Muted the video to enable autoplay as per mobile browser requirements.
- Used "preload" and "autoplay" attributes in the video tag.
- Followed various recommendations from the community, but the issue persists.
I’ve also experimented with some JavaScript functions suggested by ChatGPT, but the problem still occurs inconsistently across different devices. Below is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Background</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
</style>
</head>
<body>
<video id="background-video" preload autoplay muted="muted" loop playsinline poster="">
<source src="Background.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
function playVideo() {
var video = document.getElementById('background-video');
video.play().then(function() {
console.log('Video is playing');
}).catch(function(error) {
console.log('Video playback failed:', error);
});
}
document.addEventListener('DOMContentLoaded', function() {
var video = document.getElementById('background-video');
document.body.addEventListener('click', playVideo);
document.body.addEventListener('touchstart', playVideo);
video.play().catch(function(error) {
console.log('Auto-play failed:', error);
});
setTimeout(function() {
window.location.href = 'menu.html';
}, 3000);
});
document.addEventListener('visibilitychange', function() {
var video = document.getElementById('background-video');
if (document.hidden || video.muted === false) {
video.pause();
} else {
video.play();
}
});
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
Despite implementing these solutions, the video still does not autoplay on all devices, and I’m unsure why. On some phones, the video is paused, and users have to tap the video to start playback.
Does anyone know why this might be happening or have any additional solutions? Your help would be greatly appreciated.
3
Many mobile browsers, including Chrome and Safari, restrict autoplay for videos, particularly those with sound. To provide a positive user experience and save data, these browsers typically block autoplay unless the video is muted. Additionally, some users may have settings enabled, either by default or by choice, to prevent autoplay due to data usage concerns or personal preferences. It is important to ensure that all devices are using the same browser, although be aware that device power modes may occasionally interfere with this. If one of these is the cause, there is virtually no solution.
1