Hey there! Let's tackle this Chrome autoplay restriction issue step by step—since Chrome 66, those autoplay videos can get blocked if users haven't interacted with your site before, but we have reliable ways to detect and work around it.

The most reliable way is to use the Promise returned by the video element's play() method. When autoplay is blocked, this Promise will reject; if it's allowed, it resolves. Here's a straightforward example:

const myVideo = document.querySelector('video');

myVideo.play()
  .then(() => {
    // Autoplay worked!
    console.log("Video autoplayed successfully");
  })
  .catch(error => {
    // Autoplay was blocked—handle this case
    console.log("Autoplay blocked:", error.message);
    // This is where you might show a "Click to play" button or other fallback UI
  });

Note that just adding the autoplay attribute isn't enough to confirm playback—you need to check the actual result of the play() call, since browser policies override the attribute in restricted cases.

Here are practical approaches to handle autoplay restrictions:

• Trigger playback via user interaction
  Chrome always allows video playback initiated directly from a user gesture (like a click, tap, or key press). Add a clear play button that users can interact with to start the video:

  <button class="video-play-btn">Watch Video</button>
  <video src="your-video-file.mp4"></video>
  
  <script>
  document.querySelector('.video-play-btn').addEventListener('click', () => {
    const video = document.querySelector('video');
    video.play();
  });
  </script>
  

• Use muted autoplay
  Chrome permits muted videos to autoplay by default, even without prior user interaction. You can set up a muted autoplay video and add a button to let users enable sound later:

  <video src="your-video-file.mp4" autoplay muted playsinline></video>
  <button class="unmute-btn">🔊 Enable Sound</button>
  
  <script>
  document.querySelector('.unmute-btn').addEventListener('click', () => {
    const video = document.querySelector('video');
    video.muted = false;
  });
  </script>
  

  The playsinline attribute helps with mobile playback consistency too.

• Leverage user's site interaction history
  If a user has previously interacted with your site (like playing a video manually), Chrome will remember this and allow autoplay in future visits. You can gently guide first-time users to play a video once to unlock better future experiences.

• Opt for video as a background element
  If your video is purely decorative (no sound, just visual background), muted autoplay is perfect here. Users won't be disrupted by sound, and you get the automatic playback you need without triggering restrictions.

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