HTML5 Video autoplay失效：网页及移动端背景视频无法自动播放

Hey there! I’ve dealt with this exact autoplay headache countless times when setting up background videos—modern browsers have super strict autoplay policies now to save users’ data and cut down on annoying auto-playing media. Let’s get your video playing automatically like it should:

The Core Fix: Update Your Video Attributes #

The main problem here is missing critical attributes that browsers require for autoplay, especially on mobile. Here’s your revised code:

<video width="100%" autoplay muted playsinline loop>
  <source src="video/342125205.mp4" type="video/mp4">
  <source src="video/342125205.ogg" type="video/ogg">
</video>

Let’s Break Down Each Key Addition/Change: #

• muted: This is non-negotiable now. Every major browser (Chrome, Firefox, Safari, Edge) blocks autoplay of audio-enabled media by default. Muting the video bypasses this restriction.
• playsinline: iOS Safari used to force all videos to play in fullscreen by default—this attribute tells it to play the video right within your page layout, which is essential for background videos.
• loop: I added this since background videos almost always need to repeat continuously, but feel free to remove it if you don’t want looping.
• Removed controls: Since this is a background video, you probably don’t want playback controls cluttering up your layout. If you do need them later, you can add them back—they don’t affect autoplay functionality.

Extra Tips for Reliability: #

• Optimize Your Video: Compress the video file size (aim for under 5MB if possible) and use a lower resolution (720p is usually enough for backgrounds). A slow-loading video might fail to autoplay because it hasn’t finished loading when the browser checks.
• Fallback JavaScript (If Needed): In rare cases, some browsers might still block autoplay even with the right attributes. You can add a small script to trigger playback once the video is loaded:

const bgVideo = document.querySelector('video');
bgVideo.addEventListener('loadeddata', () => {
  bgVideo.play().catch(err => {
    console.log("Autoplay blocked: ", err);
    // You could show a play button here as a fallback
  });
});

Just note that this might still be blocked in some scenarios, so the attribute-based fix is always the first step.

内容的提问来源于stack exchange，提问作者fewcodes