wechatVideoExample
1.0.0
Test source code for playing videos on WeChat: Since WeChat uses the X5 browser, various weird problems occur when playing videos using the video tag. This source code is a tentative source code made in the process of solving this problem. It includes various test cases: using canvas to play videos, using pictures to play videos, using x5 tags, etc. This available source code library can be retained, and interested students can download it themselves.
###After downloading the introduction, create a new directory on the host and copy all the source code to this directory. Use WeChat browser to access the html page inside to test.
Author chenjsh36 Ant Financial Data Experience Technology Team
With the advent of the traffic era and the improvement of hardware technology, more and more websites hope to play their own videos on PC or mobile terminals. The gradual improvement of <video>'s compatibility makes developers more willing to use it. Implement video playback scenarios.
This article mainly lists the common scenarios for video playback and the pitfalls encountered in each scenario. It is hoped that it can help developers to choose appropriate technical solutions more quickly and reduce the pitfalls when encountering demand development. frequency__.
autoPlay Boolean attribute; when specified, the video will automatically start playing immediately and will not stop waiting for the data to be loaded.
Video autoplay can automatically play the video when the page is open and the resources are loaded enough, reducing the interaction of one user click. It can also be applied to dynamic backgrounds and H5 imitation video call functions. However, due to various reasons, automatic playback has varying degrees of restrictions on both the PC and mobile terminals.
In the early days, a user gesture video tag was required to play; starting from version 10 , the video rules were modified, and Apple relaxed inline and autoplay . The strategy is as follows (only applicable to Safari browser):
<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks. (video elements without audio sources allow autoplay)<video muted> elements will also be allowed to autoplay without a user gesture.<video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM. (video elements will only begin playing when visible on-screen)<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport. __Early__ also required user gestures to play; Android's Chrome 53 relaxed the autoplay policy. The policy is different from iOS's Safari. It is necessary to set autoplay and muted (whether the sound is muted) on the video at the same time to allow automatic playback; __Android's FireFox and UC Browser__ support automatic playback under any circumstances; the situation with other Android browsers is currently unclear;
In the early days, autoplay was supported, but recently Safari and Chrome have successively modified their autoplay strategies...
__Safari 10 and later__ Videos and audio with audio are disabled by default from automatic playback . For more information, please refer to this article;
Autoplay under Chrome (old version):
Safari (post 10) does not play automatically:
Videos with muted sound can still be played. Videos with sound will be automatically played based on the __Media Participation Index__. So what is the Media Participation Index? The official explanation and related dimensions are given:
MEI is an index that evaluates the user's media participation on the current site. It depends on the following dimensions:
- The user stayed on the media for more than 7 seconds
- Audio must be displayed and not muted
- Interacted with video
- The size of the media must be no smaller than 200x140.
After reading this, the developer’s thoughts are as follows:
Fortunately, both Safari and Chrome, while restricting automatic playback, provide a mechanism to detect whether the video can automatically play, so that developers can have alternatives when they find that automatic playback cannot occur:
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
});
}
because it can be disruptive, data-hungry and many users don't like it . (Because it can be disruptive, data-hungry and many users don't like it.)
I did find that H5 that plays automatically can often be seen on WeChat. However, the video playback example written by the author with autoplay and playsInline still cannot play automatically on WeChat, but it can play automatically on DingTalk.
| System-Browser | with sound | without sound |
|---|---|---|
| IOS DingTalk | support | support |
| IOS Safari | prohibit | Autoplay |
| IOS WeChat | prohibit | prohibit |
Through querying the information, IOS WebAPP development is based on the browser kernel provided by IOS , so the performance of automatic playback can be modified in the webview of WebAPP. DingTalk obviously supports automatic playback, while WeChat prohibits automatic playback, but provides Built-in events to support autoplay:
Automatic playback through WeixinJSBridgeReady event under WeChat:
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; In mobile browsers, when the user clicks to play or triggers playback through the API video.play(), the video will be forced to be played in full screen on top. The original intention of the design may be that full screen can provide a better user experience, but there are Sometimes developers want to be able to control whether to go full screen to meet other needs.
If you want to achieve non-full-screen playback, just add the playsinline attribute to the video tag. This attribute is basically no problem in mobile browsers based on the webkit kernel. If it doesn't work, just add webkit-playsinline :
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>So how to deal with browsers with other kernels? At this time, you need to understand what browsers are currently on the market.
First, you need to know the current four browser cores in the world:
in:
Common domestic PC browsers such as UC Browser, QQ Browser, Baidu Mobile Browser, 360 Secure Browser, Google Chrome, Sogou Mobile Browser, Cheetah Browser, and mobile UC, QQ, Baidu and other mobile browsers have kernels modified based on Webkit. Essentially, we can think that mobile users on the market basically use webkit kernels or browsers modified based on webkit kernel, so the compatibility of playsinline is very good!
The video element provides multiple behavioral events for developers to control video playback. The ones with good compatibility include onended , __ontimeupdate, onplay, onplaying, etc. __Some events do not behave consistently on different browsers and different devices.
For example: monitoring ' canplay ' under ios (whether enough data has been buffered for smooth playback) will not be triggered when loading, even if __preload="auto" __ is useless, but in the Chrome debugger on PC Next, it will be triggered during the loading phase. ios needs to be played before it will be triggered.
Loading completed:
Click to play:
Loading completed:
Click to play
Loading completed:
Click to play:
Some events have inconsistent display characteristics under different systems, devices, and browsers, so be careful when using them.
With controls added to this attribute, Gecko will provide user controls, allowing users to control video playback, including volume, frame crossing, and pause/resume playback.
The controls attribute specifies that the browser should provide playback controls for the video, otherwise the playback controls will be hidden, so developers can customize their own playback controls. Hiding playback controls has good compatibility on PC and IOS mobile terminals. However, hiding controls is not supported on Android mobile terminals, but it can still be achieved through some methods.
A more sophisticated method is to enlarge the video and move the control bar out of the field of view to achieve the hidden effect! In fact, it is to make the video element larger than the parent container, so that the bottom control bar will be outside the parent container, and then set the parent container to: overflow:hidden, a method to hide the playback controls! The disadvantage is that the video will be enlarged, so you need to leave a blank space in advance for enlarging.
The x5 kernel team of Tencent's android team has relaxed the restrictions on video playback. The video does not necessarily call their much-criticized video player. It uses the __x5-video-player-type="h5" attribute to hide the control elements and at the same time __The video is no longer on top, allowing other elements to float on top .
After understanding the common scenarios and common pitfalls of video playback, we can enhance the user experience by providing corresponding solutions for different scenarios. For example, H5 pages that automatically play on mobile devices can indirectly trigger video playback by guiding users to click or slide. This is the most conservative approach, no bugs! A better solution is to automatically play by default and capture situations where playback is prohibited, and then guide users to interact to achieve video playback.
use video In the early days, video playback was severely restricted on the mobile terminal because it involved high performance consumption, high traffic consumption, and user experience considerations. However, with the improvement of mobile phone performance, the advent of the traffic era, and stronger scene requirements, Restrictions have been gradually relaxed, while the PC side has gradually Gradually moving from the "loose generation" to the "tightening generation", both of them are constantly updating their strategies for the purpose of giving users a better experience. In the future, they may become unified, and developers can start from the bottom layer of compatibility and adaptation. Release it so you have more energy to do higher-level work.
If you are interested in our team, you can follow the column, follow github or send your resume to 'tao.qit####alibaba-inc.com'.replace('####', '@'). Anyone with lofty ideals is welcome to join ~
Original address: https://github.com/ProtoTeam/blog/blob/master/201806/1.md
