Chrome浏览器中HTML5 Video页面加载时无法自动播放的问题

Hey there, I’ve dealt with this exact Chrome autoplay headache before—let me walk you through why it’s happening and how to fix it quickly.

Why Chrome Blocks Autoplay #

Chrome has strict autoplay policies in place to prevent unwanted audio from blaring at users as soon as they load a page. By default, it will block autoplay for videos that aren’t muted, unless the user has already interacted with your page (like clicking anywhere on it). Other browsers have looser rules, which is why your video works everywhere else.

Quick Fix: Add the muted Attribute #

The simplest way to get autoplay working in Chrome is to add the muted attribute to your video tag. This tells Chrome the video won’t play audio automatically, so it allows autoplay. You can also add playsinline to ensure it plays in the page (not fullscreen) on mobile devices.

Here’s your updated code:

<video id="video1" width="300" autoplay muted playsinline controls>
  <source src="https://www.***.com/wp-content/themes/***/videos/***-video.mp4" type="video/mp4">
</video>

If You Need Audio Later #

If you want the video to have sound, you can’t autoplay it with audio enabled in Chrome. Instead, add a button that lets users manually unmute the video after interacting with the page. Here’s a quick JavaScript snippet for that:

const video = document.getElementById('video1');
const unmuteButton = document.createElement('button');
unmuteButton.textContent = 'Unmute Video';
document.body.appendChild(unmuteButton);

unmuteButton.addEventListener('click', () => {
  video.muted = false;
  // If the video paused when muted, resume playback
  if (video.paused) {
    video.play();
  }
});

This way, you comply with Chrome’s policies while still giving users control over audio.

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