[JavaScript] HTML5 video Tag considerations

Chrome 66 Disables sound autoplay

The sound does not play automatically this is always a convention on the Ios/android, and the desktop version of Safari in 2017 also announced the ban on multimedia autoplay with sound, followed by a April 2018 release of Chrome 66, which officially turned off the sound auto-play. This means that <audio autopaly></audio> <video autoplay></video> the desktop browser will also expire.

The first mobile browser is completely forbidden to automatically play audio and video, taking into account the phone's bandwidth and battery consumption. But then changed, because browser vendors found that Web developers may use GIF dynamic diagram instead of video for AutoPlay, as the iOS document says, using GIF bandwidth traffic is 12 times times the video (h264) format, and playback performance consumption is twice times, so this is bad for users. or use canvas for hack, as mentioned in the Android Chrome document. As a result, browser vendors have released the restrictions on multimedia autoplay, as long as they have the following conditions to automatically play:

(1) No audio track, or set the muted property

(2) In the view is visible, to insert into the DOM inside and not display:none or Visibility:hidden, not slide out of the visible area.

In other words, as long as you do not open the noise nuisance, and visible to the user, let you automatically play, do not need you to use GIF method to hack.

The desktop version of the browser has also recently used this strategy, such as the description of the upgraded Safari 11:

And a description of the chrome documentation:

This strategy undoubtedly has the biggest impact on video sites, such as tips for opening Tudou in Safari:

A setup wizard has been added. Chrome's prohibition is more humane, it has a MEI strategy, this strategy is probably to say that as long as the user active on the current web page more than 7s of audio and video (video window can not be less than 140 x), will allow automatic playback.

For web developers, how to effectively avoid this risk?

Chrome's documentation gives you a best practice: You can automatically play the audio and video by adding a muted property, and then display a button that sounds turned off, prompting the user to click on the sound. For the video, it is true that this can be done, and for audio, many people are listening to the page click event, as long as the point of time to start playing sound, generally playing a background music. But how do you automatically play multiple sounds for a page with multiple sound resources?

First, if the user has not yet interacted with the call to play the sound api,chrome will be prompted:

Domexception:play () failed because the user didn ' t interact with the document first.

Safari will be so prompt:

Notallowederror:the request is a allowed by the user agent or the platform in the current context, possibly because the User denied permission.

Chrome Bug tip is the most friendly, meaning that the user has not interacted, not to tune play. What does the user's interaction include? This includes user-triggered Touchend, click, DoubleClick, or KeyDown events, which can be tuned to play in these events.

So the above mentioned that many people are listening to the entire page of click events to play, no matter where the point, as long as the point on the line, including touch down. This method only applies to one sound resource, does not apply multiple sounds, how can multiple sounds be broken? Here is not to say with the browser to dry, "the inverse of the day", our purpose is to enhance the user experience, because some scenes if the automatic playback is really better, such as some answer the scene, need to listen to the sound to answer questions, if the user in the course of the answer can automatically play the corresponding topic sound, is indeed more convenient. It is also a technical implementation to discuss sound playback.

Native playback videos should only use the video tag, while native playback audio, in addition to the voice tag, there is another API called Audiocontext, which can be used to control the sound playback and with a lot of rich control interface. Tune Audio.play must respond in a click event, and the difference between using Audiocontext is that it can be played as long as the user has clicked anywhere on the page. So you can use Audiocontext instead of audio tags to play sounds.

We first use Audio.play to detect whether the page supports AutoPlay in order to determine the timing of our playback.

How video listens for events that enter and exit full screen in iOS

function () {       }). On (function() {      });

Video into full screen

var video = Document.queryselector (' #myvideo '); Video.webkitenterfullscreen ();

[JavaScript] HTML5 video Tag considerations