The browser limits HTML5 media autoplay for user experience. From Chrome 66, only silent automatic playback is allowed, and Safari and Firefox policies are stricter. Solutions include: 1. Mute by default and provide an unmute button; 2. Listen to the user to play a sound video after the first interaction; 3. When the iframe is embedded with the muted=1 parameter; 4. The mobile terminal needs to add the playsinline attribute. JS controls errors when playing, ensures that user interaction triggers and is compatible with promises from different browsers.

The changes in HTML5 media automatic playback policy are actually to put it bluntly that in order to improve user experience, browsers have begun to restrict the automatic playback of audio and video when web pages are loaded. You may have encountered the code you wrote before and can't run now, and the problem is probably here.

Reasons for the automatic playback being restricted

Browser manufacturers make these changes mainly for user experience considerations. Imagine if you open a web page and suddenly a sound comes out. Isn’t this experience quite bad? Especially for mobile users, traffic and disruption are big problems.

So starting from Chrome 66, only silent autoplay is allowed. Other situations must trigger media playback through user interaction (such as clicks, swipes). Safari and Firefox also have similar strategies, even stricter.

How to make videos automatically play without interruption

If you want your video to be played automatically, the key lies in the "user permission" process. Here are a few common practices:

• Default mute provides an unmute button
  This is the most direct way. After setting the muted property, most browsers allow automatic playback.

• Listen to the user's first interaction and play the video with sound
  For example, add a button or click area to the page, and then call .play() and unmute it after the user clicks it.

• Cross-domain issues should be considered when embedding videos using iframes
  If you are loading YouTube or Vimeo videos with <iframe></iframe> , remember to bring muted=1 parameter, otherwise it may be blocked.

Mobile is more stringent than desktop

The restrictions on automatic playback on mobile devices will be more severe, especially Safari on iOS. Sometimes even if muted is set, it may not be able to automatically play, unless the video has also added playsinline attribute.

For example: You are making an H5 page and want to play a background video as soon as you come in. At this time, be sure to check whether muted and playsinline are added, otherwise it will easily get stuck.

Moreover, some browsers on iOS (such as WeChat built-in browsers) have their own rules, so you should pay special attention to debugging.

Some tips for controlling playback in JS

If you plan to use JavaScript to control playback behavior, there are several details to note:

• It is best to add a catch to handle errors after calling .play()
• Calling the play function in user interaction events is safer
• The promises returned by different browsers may be different, and the compatibility processing should be done well.

For example:

 videoElement.play().catch(error => {
  console.log('Play failed, maybe the user is not interacting', error);
});

This can prevent the page from crashing due to permission issues and can also help you locate what is wrong.

Basically that's it. It seems simple, but it is easy to ignore details in actual development, especially when it is adapted to multiple platforms.

The above is the detailed content of Understanding HTML5 Media Autoplay Policy Changes. For more information, please follow other related articles on the PHP Chinese website!