January 10, 2018

Video Autoplay

Web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.

Video autoplay policies differs in mobile browsers and desktop browsers.

Mobile Browsers

• Autoplay with sound is disabled in major mobile browsers.
  • On chrome, if the user has added the site to his or her home screen then autoplay wuth sound is allowed.
• Muted autoplay is allowed if
  • In Chrome browser, data saver mode is off.
  • In Safari browser, video autoplay is not disabled.

Desktop Browsers

Safari

• Autoplay with sound is disabled in latest safari browser.
• Muted autoplay is allowed in safari browser if
  • User has not disabled it

Chrome

Chrome’s autoplay policies are simple.

• Muted autoplay is always allowed.
• Autoplay with sound is allowed if:
  • User has interacted with the domain (click, tap, etc.).
  • The user’s Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

Best Practices for Web Developers

Here’s the one thing to remember, don’t ever assume a video will play, and don’t show a pause button when the video is not actually playing.

You should always look at the Promise returned by the play function to see if it was rejected:

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.
   });
}

One cool way to engage users is about using muted autoplay and let them chose to unmute (see code snippet below). Some websites already do this effectively, including Facebook, Instagram, Twitter, and YouTube.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
     unmuteButton.addEventListener('click', function() {
         video.muted = false;
     });
</script>