With the popularity of video apps such as Douyin and Kuaishou, h5 video apps on mobile end also rise, and more and more scenes are played by video. This article mainly introduces some scenes of video playing on mobile end and some problems encountered by individuals in the development process. I hope that after reading this article, It can reduce the pit for developers to develop quickly when using video playback on mobile terminal

Full-screen playback

Fullscreen playback is a common scenario on mobile terminals, so we need to set the video to play in full screen. The method used for full screen playback is requestFullscreen(), and considering the compatibility of browsers, we need to add compatible codes:

let ele = document.getElementById('video')
if (ele.requestFullscreen) {
  ele.requestFullscreen()
} else if (ele.mozRequestFullScreen) {
  ele.mozRequestFullScreen()
} else if (ele.webkitRequestFullScreen) {
  ele.webkitRequestFullScreen()
}
ele.play()
Copy the code

Get the video element node, then determine the requestFullscreen attribute of different browsers and call different methods to requestFullscreen, thus ensuring full screen playback of the video

Wechat browser full screen playback

Why mention full-screen video playback in wechat browser alone? Because under wechat you can choose to use native browser kernel rendering video or enable Tencent X5 kernel rendering, what is the difference? If native rendering is used, it is the same as rendering in ordinary browsers. However, if Tencent X5 kernel rendering is enabled, when the video is playing, the X5 kernel will force the video to play in full screen. However, ios is not supported at present

X5 kernel plays at the same layer

Add x5-video-player-type=”h5″ attribute to the video tag to enable x5 kernel rendering video although the video will play in full screen, it also provides a better user experience, and another advantage of x5 kernel rendering is that it supports same-layer rendering. When playing a video, the level is no longer the highest, and elements can float above the video. The effect is shown as follows: wecHatiMG310.jpeg

window.onresize = function(){
  test_video.style.width = window.innerWidth + "px";
  test_video.style.height = window.innerHeight + "px";
}
Copy the code

playsinline

What happens when you want to use x5 kernel rendering in wechat browser, but you don’t want to force full screen playback? This is where the playsinline property comes in, and this property also works for some of the other mobile browsers that force full screen playback, so you just set playsinLine =”true”, webKit-Playsinline =”true” declaration, and that’s fine, but in X5, This means that on Android, rendering with x5 will always play in full screen

Event differences

loadedmetadata

Duration: The duration of the video, but this property is a little different between Android and ios. In Android, it will be triggered after the video is loaded, and the relevant video information will be obtained. However, in ios, this event will not be triggered after the video is loaded in wechat browser. It will be triggered after the user clicks play. However, it will be triggered after the video is loaded in Safari browser

canplay

This event is triggered when the media has enough data (at least several frames) to play. This event is triggered when the video is loaded on Android, but not until the video is played on ios

Automatically play

Autoplay in Android requires autoplay and poster Settings in chrome, other browsers do not support autoplay, and the android wechat browser gave autoplay and poster attributes concurrently. The poster attribute is also disabled, video cover is not displayed, autoplay does not autoplay directly on ios mobile devices, but autoplay and fraternal attributes gave autoplay to MAC Safari video, which differs from online feeds. There is a video attribute support table on MDN:

conclusion

With the advent of the era of mobile traffic, to the mobile Internet experience optimization, more video playback scenarios and requirements will be carrying on the mobile terminal, but the mobile video displays video due to browser kernel, system such as restrictive have different performance during playback, developers need to spend time and energy to deal with such problem, Hopefully this article will be helpful when using video tabs on mobile devices. If there is a mistake or not rigorous place, welcome criticism and correction, if you like, welcome to praise.