Autoplay background video in Chrome Autoplay Policy

问题

So in the latest chrome apparently the Autoplay Policy has been changed so this in turn breaks every site that has a video background that should autoplay I am wondering if anyone has any smart work arounds that could "solve" the issue? (I believe a button or "enter page" solution would be a terrible way of a work around especially for a background video)

Here is what you get now in the console if a user doesn't interact with the document:

  Uncaught (in promise) DOMException: play() failed 
because the user didn't interact with the document first.

Here is the change from google: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

回答1:

Chrome will not allow autoplay videos after the recent policy change. An easy solution is to mute the video, simulate a click, then play the video.

HTML

<video id="video" muted loop="loop">

Javascript

// Click a random element
document.getElementById('randomElement').click();
// Play video after click
setTimeout(function(){
    document.getElementById('video').play();
}, 1500);

回答2:

I have been searching for an answer for this too. I don't see a clear workaround as it is difficult to get around which appears to be a strict policy. Seems like as you're saying Chrome is suggesting the following

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

I wonder if just adding muted to the autoplay videos will help to reduce and help align with Chrome new policy quicker so the user can see those videos again. The other option appears to be going back from using an HTML5 video tag back to an iframe and adding allow="autoplay. This seems to enable the autoplay by default. Definitely seems like a step back to use an iframe instead of an HTML5 video tag but that seems to be the only way to properly control the URL in order to make sure the video can be set as the same domain.

来源：https://stackoverflow.com/questions/50465231/autoplay-background-video-in-chrome-autoplay-policy

标签

google-chrome

html5-video

policy

autoplay