A brief discussion on filling in the pitfalls of html5 video on mobile terminals

This article introduces the html5 video mobile terminal filling in the pitfalls and shares it with everyone. The details are as follows:

 <video id=video style=object-fit:fill autoplay webkit-playsinline playsinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill The video content fills the entire video container poster:img.jpg Video cover autoplay: Automatic play auto - Load the entire video when the page loads meta - Only load the metadata when the page loads none - Do not load the video when the page loads muted: When this attribute is set, it specifies that the audio output of the video should be muted webkit-playsinline playsinline : Inline play x5-video-player-type=h5 : Enable x5 core H5 player x5-video-player-fullscreen=true full screen setting. The settings of true and false will lead to different layouts. x5-video-orientation=portraint: declares the direction supported by the player. The optional values ​​are landscape horizontal screen and portrait vertical screen. Default value portrait. Whether it is live broadcast or full-screen H5, it is generally played vertically, but this attribute requires x5-video-player-type to enable H5 mode -->

 <video autoplay></video>

However, in many mobile browsers, the user's actual operation (standard events such as touchend, click, doubleclick or keydown events) is required to trigger the call to video.play() in order to automatically play audio and video.

 dom.addEventListener('click', function () { video.play()})

Video.play() can also be triggered in wx.ready()

 wx.ready(function () { video.play()})

Set the property webkit-playsinline playsinline

 <video id=video webkit-playsinline playsinline /></video>

When playing videos in iOS Safari and some Android browsers, the video cannot be played in the h5 page, and the system will automatically take over the video.

If you need to play a video in an h5 page, you need to add webkit-playsinline to the video tag. After iOS 10, you need to add playsinline. It is recommended to add these two attributes at the same time. The app also needs to support this mode.

 webview.allowsInlineMediaPlayback = YES;

Both iOS Mobile QQ and WeChat support this mode, but Android WeChat hangs up.

The built-in browser of Android WeChat uses Tencent X5 kernel and does not follow the X5web standard. One of them is forced full screen video. After the video is played, QQ’s own video recommendations will appear.

It is said that it has a whitelist, and the video resources in the whitelist will not be full screen. But Tencent can no longer add to the whitelist. Urinary, no solution. . . . . .

There is currently a solution, which is to use h5 canvas to play video

Pitfalls encountered when using canvas: video must add the x5-video-player-type=h5 attribute, otherwise, the video will be stuck on the mobile terminal and cannot be played. Personally, I think it is because the video is taken over.

 <div class=wrapper> <video id=video style=display: none autoplay src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var canvas = document.querySelector('#canvas') var wrapper = canvas.parentNode var width = wrapper.offsetWidth var height = wrapper.offsetHeight var ctx = c.getContext('2d') var time = null canvas.width = width canvas.height = height canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0, 0, width, height); }, 20); }, false); video.addEventListener('pause', function () { window.clearInterval(time); }, false); video.addEventListener('ended' , function () { window.clearInterval(time); }, false);</script>

Finally, it was discovered that although canvas is used to play videos, recommended videos after full-screen video playback can be blocked in Android WeChat. But there is no way to disable the full-screen problem when playing videos. Still get the evil white list. Make complaints. . . . . . . . . . . . . . . .

What's even more annoying is that I haven't found a way to trigger full-screen exit via js.

When playing a video on ios, a black screen will appear briefly and then display normally.

Solution:

Add a div above the video and fill it with an image to create the illusion of loading before playing. Then listen to the timeupdate event and remove this div block when the video is playing.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ posterImg.hidden(); }})

HTMLVideoElement and HTMLAudioElement both inherit from HTMLMediaElement

 //Media error MediaObj.error; //null: normal MediaObj.error.code; //1. User termination 2. Network error 3. Decoding error 4. Invalid URL //The current state of the media MediaObj.currentSrc; //Return to the current Resource URLMediaObj.src = value; //Return or set the current resource URLMediaObj.canPlayType(type); //Whether resources in a certain format can be played MediaObj.networkState; //0. This element is not initialized 1. Normal but not using the network 2. Data is being downloaded 3. The resource MediaObj.load() is not found; //Reload the resource specified by src MediaObj.buffered; //Return to the buffered area, TimeRangesMediaObj.preload; //none: do not preload metadata: preload resource information auto://ready state MediaObj.readyState; //1:HAVE_NOTHING //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //Whether it is seeking//Playback status MediaObj.currentTime = value; //The current playing position, assignment can change the position MediaObj .startTime; //Generally 0, if it is streaming media or a resource that does not start from 0, it is not 0MediaObj.duration; //The current resource length stream returns infinite MediaObj.paused; //Whether to pause MediaObj.defaultPlaybackRate = value; //Default For playback speed, you can set MediaObj.playbackRate = value; //Current playback speed, change it immediately after setting MediaObj.played; //Return the area that has been played, TimeRanges, see below for this object MediaObj.seekable; //Return the area that can be seeked TimeRangesMediaObj.ended; //Whether to end MediaObj.autoPlay; //Whether to automatically play MediaObj.loop; //Yes Loop play MediaObj.play(); //Play MediaObj.pause(); //Pause//Video control MediaObj.controls;//Whether there is a default control bar MediaObj.volume = value; //Volume MediaObj.muted = value; //Mute//TimeRanges (region) object TimeRanges.length; //Region Number of segments TimeRanges.start(index) //Start position of the index segment area TimeRanges.end(index) //The end position of the index section //[★★★**Related events**★★★]//Event distribution var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//Event monitoring eventTester(loadstart); //The client starts requesting data eventTester(progress); //The client is requesting data eventTester(suspend); //Delayed downloading eventTester(abort); //The client actively terminates the download (not caused by an error) eventTester(loadstart); //The client starts requesting data eventTester(progress) ; //The client is requesting data eventTester(suspend); //Delayed downloading eventTester(abort); //The client actively terminates the download (not due to an error), eventTester(error); //An error was encountered when requesting data eventTester(stalled); //Network speed stalled eventTester(play); //EventTester(pause) is triggered when play() and autoplay start playing; //pause() triggers eventTester(loadedmetadata); //Successfully obtained resource length eventTester(loadeddata); //eventTester(waiting); //Waiting for data, not an error eventTester(playing); //Start playback eventTester(canplay); //Can play, but may be paused due to loading eventTester(canplaythrough); //Can play, all songs have been loaded eventTester(seeking); //Searching eventTester(seeked); / /Finding eventTester(timeupdate); //Playback time changed eventTester(ended); //Playback ended eventTester(ratechange); //Playback rate changed eventTester(durationchange); //Resource length changes eventTester(volumechange); //Volume changes

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.