Author ChenjSH36 Ant Financial · Data Experience Technology team

With the advent of the age of traffic and the improvement of hardware technology, more and more websites hope to play their own videos on PC or mobile terminals, and the gradual improvement of the compatibility of

This article mainly lists the common scenarios for video playback and pits in each scenario, hoping to help developers choose the right technical solution faster and reduce the number of pits when they meet the requirements of development.

Scenario 1: Auto play

AutoPlay Boolean attribute; When specified, the video will automatically start playing without stopping to wait for data to finish loading.

Automatic video playback can automatically play the video when the page is open and resources are loaded enough to reduce the interaction of a user click. At the same time, it can apply the functions of dynamic background and H5 imitation video call. However, due to various reasons, auto – play in both PC and mobile terminals have different degrees of limitation.

The mobile terminal

IOS

In the early days, you had to have a User Gesture video TAB; From version 10 onwards, Apple relaxed the rules for inline and Autoplay with the following policies (Safari only) :

  • <video> elements will be allowed to autoplayWithout a user gesture if their source media contains no audio tracks.
  • <video muted>Elements will also be allowed to autoplay without a user gesture.
  • If a <video>element gains an audio track or becomes un-muted without a user gesture, Playback will be paused if video elements have an audio source without user gestures or become unbarred
  • <video autoplay>elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, Inserted into the DOM: Made visible through CSS, and inserted into the DOM.
  • <video autoplay>Elements will be paused if they become non-visible, such as by being scrolled out of the viewport.

The android

The early days also required user gestures to play; Chrome 53 for Android has given a reduced autoplay strategy, a shift from IOS Safari, requiring simultaneous autoplay and conservation of video; Android’s FireFox and UC browsers support autoplay in any situation; Other Android browsers are not yet clear;

PC

In the early days, autoplay was supported, but Safari and Chrome have recently changed their autoplay policies…

Safari

Autoplay is disabled by default for video and audio with audio in Safari 10. See this article for more information.

Autoplay under Chrome (old version) :

Safari (after 10) does not autoplay:

Chrome

The video with sound can still be played, but the video with sound can be automatically played based on the media engagement index. What is the media engagement index? Officials give explanations and related dimensions:

MEI is an index that measures users’ media engagement with the current site, depending on the following dimensions:

  • The user stays on the media for more than 7 seconds
  • The audio must be displayed and not muted
  • There was interaction with the video
  • The size of the media is not less than 200×140.

Here’s what the developer thought after watching it:

Can the test play automatically?

The good news is that Safari and Chrome both limit autoplay and provide a mechanism to check if a video can autoplay, so developers can have a backup if they find that it can’t:

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

thinking

Why the early ban on video autoplay?

Because it can be disruptive, data-hungry and many users don’t like it.

Why is autoplay allowed again?

  • Some developers use other ways, such as Canvas and GIF, to achieve the effect of automatic video playback, but the performance and traffic consumption are far inferior to video playback;
  • Data is cheaper now and mobile hardware is getting better;
  • Users can set to disable auto play (enable traffic saving mode);

Why can IOS wechat and Dingding automatically play video with sound?

It is true that we can often see H5 auto-playing on wechat, but the video playing sample with autoplay and playsInline set by the author himself still cannot be auto-playing on wechat, while it can be auto-playing on Dingding

System – Browser With the sound Without a sound
IOS nailing support support
IOS Safari ban Automatically play
IOS WeChat ban ban

By querying information, IOS WebAPP development is based on the browser kernel provided by IOS, so the performance of auto play can be modified in the WebView of WebAPP. The auto play is obviously supported by Dingpin, while the auto play is prohibited by wechat, but built-in events are provided to support auto play:

Automatic playback through WeixinJSBridgeReady event in wechat:

document.addEventListener(
  'WeixinJSBridgeReady'.function() {
    video.play();
  },
  false
);
Copy the code

Scenario 2: Full-screen processing

In mobile browsers, when users click to play or trigger to play through API Video.play (), video will be forced to play in the form of full screen at the top. The original intention of the design may be that full screen can provide better user experience, but sometimes developers hope to control whether full screen can meet other requirements.

Playsinline cancels full screen

Webkit-playsinline = webKit-playsinline = webKit-playsinline = webKit-playsinline = webKit-playsinline = webKit-playsinline

<video
    src={videoUrl}
    webkit-playsinline="true"
    playsinline="true"
  />
Copy the code

So what about browsers with other cores? This time to understand the current market exists under the browser what.

Playsinline compatibility

First of all, there are four browser kernels around the world:

  • Microsoft Internet explorerTrident
  • Netscape was originally developed and sold to the Mozilla Foundation and evolved into FirefoxGecko
  • KDE open source kernelWebkit
  • The OperaPresto

Among them:

  • TridentOn the mobile end, the browser is mainly built into the WP7 system
  • PrestoIt works on all connected devices, including Opera Mobile, Opera Ini, Openg Browser and Openg HD Beta on Mobile devices
  • WebkitThe application scope of the kernel is more extensive, Android native browser, Apple’s Safari, Google Chrome(used by Android4.0) are based on Webkit open source kernel development.

And the domestic common PC browser such as UC browser, QQ browser, Baidu mobile browser, 360 security browser, Google Browser, Sogou mobile browser, Cheetah browser and mobile UC, QQ, Baidu and other mobile browsers are modified according to the core of Webkit, In essence, we can assume that most mobile users in the market are using webKit or webKit-based browsers, so Playsinline is very compatible!

Scenario 3: Play control

The video element provides multiple behavior events for developers to control video playback, with good compatibility such as Onended, ontimeUpdate, onplay, onplaying, etc. Some events have different performances in different browsers and devices.

For example, on ios listening for ‘canplay’ will not trigger when loading, even if preload=”auto”, but on PC Chrome debugger will trigger when loading. Ios needs to play before it triggers.

Chrome simulator

Loading completed:

Click Play:

MacOS Safari

Loading completed:

Click the play

IOS Safari

Loading completed:

Click Play:

Some events display different features in different systems, devices, and browsers. Therefore, exercise caution when using them.

Scenario 4: Hide the play control

Add this property to Gecko to provide user control, allowing the user to control the playback of the video, including volume, cross-frame, pause/resume playback.

The Controls property specifies that the browser should provide a playback control for the video, otherwise it hides the playback control so that developers can customize their own playback controls. Hidden play controls work well on PCS and IOS mobile devices, while hidden controls are not supported on Android mobile devices, but there are ways to do this.

Black generate

The darker method is to zoom in on the video and move the control bar out of view to hide the effect! Make the video element larger than the parent, so that the bottom control bar is outside the parent, and the parent is set to: overflow: Hidden. The disadvantage is that the video will be enlarged, the need to leave a good blank for amplification in advance.

Wechat browser

The X5 core team of Tencent’s Android team relaxed the restrictions on video playback. Videos don’t necessarily call their much-maltreated video player, hiding control elements with the x5-video-player-type=” H5 “attribute, while videos are no longer at the top, allowing other elements to float on top.

conclusion

After understanding the common scenarios and pits of video playback, we can enhance user experience by providing corresponding solutions for different scenarios. For example, the H5 page that automatically plays on the mobile terminal can indirectly trigger the video playing by guiding the user to click or slide, which is the most conservative approach, no bug! A better solution is to automatically play the video by default, capture the situation that the video is not played, and then guide the user to interact to play the video.

Using video for video broadcast early because involves performance overhead, and traffic cost more in the user experience, such as in the mobile terminal is seriously restricted, but with the advent of the era of mobile phone performance boost, traffic demand, stronger ground scene, gradually eased restrictions, and PC is gradually from “easy generation” to “tightening generation”, Both are constantly updating their strategies for a better user experience, and the future may converge, freeing developers from low-level compatibility and allowing them to focus more on higher-level work.

reference

  • auto-play-policy-changes-for-macos
  • Chrome auto-play
  • auto-play-is-bad-for-users
  • Why are few browsers using the Gecko kernel?
  • Browser kernel

If you are interested in our team, you can follow our column, follow Github or send your resume to ‘tao.qit####alibaba-inc.com’.replace(‘####’, ‘@’)

Original address: github.com/ProtoTeam/b…