This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Auto Play Policy

According to MDN, the video autoplay control video autoplay.

<video src="/videos/awesomevid.mp4" autoplay>
Copy the code

However, because the default autoplay may disturb users, one of the following conditions must be met to achieve a better user experience.

  • Mute the video (by adding a muted attribute) or set the volume to 0
  • The user interacts with the site (by clicking, tapping, keystrokes, etc.)
  • The site has been whitelisted by browsers;
    • The browser determines that the user uses media frequently and automatically adds the user to the whitelist
    • Or by preference
    • Or other user interface functions occur manually
  • The autoplay policy is granted<iframe>And its document autoplay support.

In addition, chromium kernel browser meets the following conditions, can also play automatically.

  • The user has added the site to the home screen of his mobile device
  • Or a PWA is installed on a desktop device.

The current (2021-08) browser kernel mainly includes WebKit (Safari), Chromium (Chrome, edge), and the auto-play strategy of the kernel determines the external video auto-play performance of the browser. For details about the update policy, refer to the following documents. (PS, is really lazy to translate one by one……)

  • Chromium Autoplay Policy in Chrome, 2017-09-13 release, 2021-05-25 update
  • Chromium www.chromium.org/audio-video… The 2018-10-22 update
  • Webkit Auto-play Policy Changes for macOS, 2017-07-08 release
  • Webkit New Video Policies for iOS, 2016-07-25

These articles describe the auto-play policy change history and the corresponding conditions in detail.

Best practices

1, auto play pocket

Don’t trust the browser to auto-play, because this is Schrodinger’s cat. So it’s better to add a play method to the bottom, manually trigger autoplay, and give some interface feedback if it fails. Such as a replay or play on button.

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

if(promise ! = =undefined) {
    promise.catch(error= > {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() = > {
        // Auto-play started
    });
}
Copy the code

2, Android wechat automatically play pocket

As of now (2021-08), android’s autoplay in wechat is not supported, even if the video is muted. Why this special situation, because Android wechat kernel X5 kernel, guess that its behavior is not synchronized with the latest Chromium.

Some strategies need to be done, perhaps as follows:

  • If it is a mute video showing the scene, you can consider for Android wechat show the same effect of GIF
  • Unmute video effect, the default display is obvious to induce the start play button
  • Ignore it, wait for the user to trigger the web behavior, and then manually enable the Play method

3, full screen processing

In some mobile browsers, the full screen function is enabled for auto play. If it is the ideal visual effect of the product, of course there is nothing wrong with it. But if you want to disable full screen play, you need to consider adding the Playsinline property for compatibility. X5-video-player-type =’h5-page’ to avoid full screen.

<video
    autoplay
    src={videoUrl}
    webkit-playsinline="true"
    playsinline="true"
    x5-video-player-type='h5-page'
/>
Copy the code

Iframe Video plays automatically

Iframe situation has not been studied on the computer, please refer to autoplay/#iframe-delegation for details