Autoplay Policy Changes

Chrome's autoplay policies are about to change in 2018 and I'm here to tell you why and how this is going to affect video playback with sound. Spoiler alert: Users are going to love it!

New behaviors

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the web experience for users, minimize the incentives to install extensions that block ads, and reduce data consumption on expensive and/or constrained networks.

With these new autoplay policies, the Chrome team aims to provide a greater control to users over content playing in their browser. Those will also benefit publishers who have legitimate autoplay use cases.

Chrome's autoplay policies are simple:

• Muted autoplay is always allowed.
• Autoplay with sound is allowed if any of the following conditions are met:
  • User has interacted with the site (click, tap, etc.)
  • Media Engagement Index threshold is crossed (desktop only)
  • Site has been installed using the "Add to Homescreen" flow (mobile only)
• Top frame can delegate autoplay permission to their iframes to allow autoplay with sound.

Media Engagement Index (MEI)

The MEI measures an individual's propensity to consume media on a site. Chrome's current approach is a ratio of visits to significant media playback events per origin:

• Consumption of the media (audio/video) must be greater than 7 seconds.
• Audio must be present and unmuted.
• Tab with video is active.
• Size of the video (in px) must be greater than 200x140.

From that, Chrome calculates a media engagement score which is highest on sites where media is played on a regular basis. When it is high enough, media playback is allowed to autoplay on desktop only.

User's MEI is available at the chrome://media-engagement internal page.

Iframe delegation

Once an origin has received autoplay permission, it can delegate that permission to iframes via a new HTML attribute. Check out the Gesture Delegation API proposal to learn more.

<iframe src="myvideo.html" gesture="media">

Without iframe delegation, videos will not be able to autoplay with sound.

Example scenarios

Example 1: Every time a user visits VideoSubscriptionSite.com on their laptop they watch a TV show or a movie. As their media engagement score is high, autoplay is allowed.

Example 2: GlobalNewsSite.com has both text and video content. Most users go to the site for text content and watch videos only occasionally. Users' media engagement score is low, so autoplay wouldn't be allowed if a user navigates directly from a social media page or search.

Example 3: LocalNewsSite.com has both text and video content. Most people enter the site through the homepage and then click on the news articles. Autoplay on the news article pages would be allowed because of user interaction with the domain. However, care should be taken to make sure users aren't surprised by autoplaying content.

Example 4: MyMovieReviewBlog.com embeds an iframe with a movie trailer to go along with their review. The user interacted with the domain to get to the specific blog, so autoplay is allowed. However, the blog needs to explicitly delegate that privilege to the iframe in order for the content to autoplay.

Best practises 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. It is so important that I'm going to write it one more time below for those who simply skim through that post.

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

Warning: Don't play interstitial ads without showing any media controls as they may not autoplay and users will have no way of starting 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>

Feedback

At the time of writing, Chrome's autoplay policies aren't carved in stone. Please reach out to the Chrome team, ChromiumDev on Twitter to share your thoughts.