Hey there! Let's figure out why your <video> tag isn't autoplaying—this is one of the most common media issues folks run into, so you're not alone. Here are the key configurations and conditions you might be missing:

1. The Non-Negotiable muted Attribute #

Virtually all modern browsers enforce an autoplay policy that blocks media with sound from playing automatically (to prevent unexpected noise for users). If your video has audio, you must add the muted attribute to get autoplay working.

Example fix:

<video autoplay loop muted src="/vids/vid.mp4">

Even if your video doesn't have audio, adding muted is still a safe bet—some browsers treat silent videos the same way as those with sound unless explicitly marked muted.

2. playsinline for Mobile (Especially iOS) #

On iOS Safari and many Android browsers, videos will default to fullscreen playback instead of playing inline on the page. This can break autoplay behavior. Add the playsinline attribute to force the video to play within your page layout:

<video autoplay loop muted playsinline src="/vids/vid.mp4">

3. User Interaction Requirements (For Non-Muted Videos) #

If you absolutely need your video to autoplay with sound, browsers will only allow this if the user has already interacted with your page (like clicking a button, scrolling, or typing). In this case, you'll need to trigger playback via JavaScript after a user action:

// Example: Play video when user clicks a button
document.querySelector('#play-button').addEventListener('click', () => {
  const video = document.querySelector('video');
  video.play().catch(err => console.error('Playback failed:', err));
});

4. Check Browser Autoplay Policies #

Browsers use metrics like the Media Engagement Index (MEI) to determine if a user is likely to want autoplay. If your site has low MEI (users don't interact with media often), even muted videos might be blocked. The best workaround here is to stick with muted autoplay, which is universally allowed.

5. Verify Video Format & Codec Support #

While this isn't an autoplay issue directly, if your video file uses a codec the browser doesn't support, it won't load or play at all. For maximum compatibility, ensure your MP4 uses:

• Video codec: H.264
• Audio codec: AAC

6. Avoid Hidden/Off-Screen Videos #

If your video is hidden initially (e.g., display: none or positioned off-screen), browsers may delay autoplay until the video becomes visible to save system resources. Make sure the video is in the viewport (or will enter it shortly) when the page loads.

Full Working Example #

Here's a robust version of your video tag that covers most edge cases:

<video autoplay loop muted playsinline controls>
  <source src="/vids/vid.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

The controls attribute is optional, but adding it gives users a fallback to play the video manually if autoplay fails for any reason.

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