Digital

Chrome Blocks The Self-Reproduction of Videos

You arrive at your job like any other day, you start your project to get stuck into work, and suddenly, you find that none of your media works correctly. In my case it was a simple video intro on the front-page that did not start in the Chrome browser. This caused a lot of confusion in search of syntax errors, incompatibility, sass ... but we were far from discovering what it really was: the autoplay attribute in Chrome browsers.

The new behavior of the "autoplay" attribute

Chrome has already notified their plans in advance. The auto-reproduction or "autoplay" of media was causing abusive advertising videos to be played unexpectedly to the user, as well as excessive consumption of network data and battery on the devices.
To solve this, the Google browser proposed in September 2017 to end these type of problems in your browser on an undetermined date.
And so it has been, although two versions have been delayed (it was planned to launch in release 64), the new policy in the browser has reached release number 66: Media that produces sound will no longer be played automatically. Therefore, this has resulted in unexpected failures in thousands of pages and web projects as well as in games, causing complaints and backlash about these policies by the developers.

Self-reproduction will now be effective if one of the following cases is met:

- If the video does not produce sound.

- If the user has already interacted with the domain before viewing the video.

- If the user has added the site to their home screen (mobile only)

- If your website is on the "whitelist" or whitelist of more than 1000 websites which Google has generated, such as YouTube.

- If the user has crossed the threshold of the media interaction index (MEI)

The MEI measures the propensity of a user to consume media on a website. This calculation done in Chrome will be effective if the following conditions are met:

  1. If the consumption of the medium is greater than 7 seconds.
  2. If the audio is activated and not muted.
  3. If the middle tab is active and not in the background.
  4. If the video size exceeds 200x140 px 

If they are met, Chrome will score the MEI on your website. When it is high enough, automatic playback on your website will be effective. As a Chrome user you can view your own MEI on the internal at chrome: // media-engagement page.

How the new policy affects both developers and user experience

In general, for all users of the web it is a step in the right direction, as it avoids the excessive use of battery and network data on devices when autonomously reproducing unwanted videos.
However, contrarily is the world of development, where thousands of websites which currently do not have support will inevitably lose the ability for their videos to be played back and their games to be played upon, falling into the eternal abyss of ruined websites. All because of the dreaded policy of release 666 ... at least in Google Chrome.
Those websites that are still currently supported have some solutions available, which we will see below

How to use media self-reproduction correctly

To use automatic media playback in a way that is compatible with all browsers, we can take different paths.

Deactivate the policy when developing

To develop it, it is normal that we want to disable this policy locally.
To deactivate it, we will do it from the internal link chrome: // flags / # autoplay-policy

Mutate the medium

As we mentioned earlier, a medium that does not produce sound can be reproduced automatically. If we use the "muted" attribute we can mute a video in html5 and get the autoplay to work.

<video autoplay muted="muted">

<source src="/themes/custom/project/video/myvideo.mp4" type="video/mp4">

</video>

Let the user decide

One way that they are already using web pages such as Facebook, Instagram, Twitter and YouTube, is to play the video without sound and let the user decide whether or not they wish to unmute it.

<video id="video" muted autoplay>

<button id="unmuteButton"></button>

<script>

unmuteButton.addEventListener('click', function() {

video.muted = false;

});

</script>

Conclusion

All these policies are open to changes by Google Chrome, but for now things are going to continue for a long period of time.
It is important to emphasize that you should never assume that a video will be played on our website, since that will ultimately (and increasingly) be the decision of the user.

About the author

Let’s have a coffee and talk about your project

START A PROJECT

Let’s have a coffee and talk about your project

START A PROJECT

We use cookies to ensure you get the best experience on our website. More info.

Accept