Autoplay background video in Chrome Autoplay Policy

Question

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

Answer 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);

Answer 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.

Answer 3

I have two smart solutions that don't need any attributes or iframes and it can autoplay audio & video with sound:

1. WebRTC Solution:

navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
    
    backgroundvideo.play(); // play your media here

    // stop microphone stream acquired by getUserMedia
    stream.getTracks().forEach(function (track) { track.stop(); });
});

It will ask users for their Microphone permission (only first time in chrome) and they have to click Allow then you are permitted to play anything with sound. It works because as long as you are capturing anything then you are allowed to play everything and then stop the microphone stream when your media starts playing.

2. Manual Solution: If for some reason users don't want to give their microphone permission then instruct them to Allow Sound permission from site settings, that will also grant access to play audio & video with sound permanently.

Inspired by this webRtc article: webrtchacks