Problems and solutions encountered in H5 video development

Recently I have done some activities to embed videos, and have accumulated experience in dotting videos. Below I record the pitfalls that others and I have encountered and the corresponding solutions.
1. Problems encountered and solutions
1.1. Video playback on ios web pages defaults to full screen (clicking on the video will pop up the player for full screen playback).
To solve the problem of insufficient full-screen playback, you can add the following attributes webkit-playsinline='true' and playsinline='true'. If setting the above attributes has no effect, you can try it with the following plug-in. iphone-inline-video
Note: When opening a webpage in Weibo to play a video under iOS, a player will pop up to play the video. Setting the playsinline attribute is invalid. You must also use the plug-in above. Personal test is effective.
1.2. Recommended videos are displayed after video playback in andriod
The video element in mobile browsers is quite special. In the early days, it was used in both iOS and Android browsers. It is at the top level of the page and cannot be covered. Later, this problem was solved under iOS, but the problem remained with Android browsers. X5 is a rendering engine developed by Tencent based on Webkit. It provides a special video element called "same-layer player" to solve the covering problem. By setting

x5-video-player-type="h5" 可以开启同层播放器，来避免播放后显示推荐视频的问题。
x5-video-player-fullscreen="true" //视频全屏播放
x5-video-orientation="portrait"//视频竖屏模式播放

1.3, video adaptation
Currently, designers generally design videos according to the standards of iphone5 or iphone7. Generally, videos can be played with 100% width and height. If you find that the video still doesn't work, you need to set the object-fit attribute according to the actual situation to solve the problem. For details, see a semi-in-depth understanding of CSS3 object-position/object-fit attributes
Note: Under the webkit kernel browser, the default is object-fit:contain.
1.4. JS controls video playback
In iOS, videos and audios are generally not actively played unless the user actively clicks, so it is necessary to monitor the interaction of the interface through js to control the video. of playback.
Playing and pausing videos mainly involves calling the play and pause methods. If some user interaction is required during video playback, the current playback time is mainly monitored through the timeupdate method. Take a look at a piece of code:

var isStop = false;
    videoElem.on('timeupdate', function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//该时间点展示交互蒙层
            $('.js_first_stop').removeClass('hide');
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解决ios暂停后再次点击播放不了问题，因为该处触发了多次，但是andriod没有该问题。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $('.js_second_stop').removeClass('hide');
        }
    });

When listening to the timeupdate event and pausing the video in ios, a global function needs to be introduced. isStop variable, otherwise there will be no response the next time you click to continue playing (multiple pauses are triggered during timeupdate), but Android does not have this problem. To determine the end of the video, you can listen to the video's ended event

videoElem.on('ended',function(){});

or monitor the video's timeupdate event, and then determine the ended attribute. If it is true, it means it is over, and if it is false, it means it is not over.

videoElem.on('timeupdate',function(){
   if(videoElem[0].ended){
    //播放结束
   }
}

In addition, the same layer player is enabled on the andriod side, and the WeChat side also provides 2 monitoring events for entering and exiting the same layer player. Enter the player event of the same layer (start playing video).

videoElem.on("x5videoenterfullscreen", function(){}

Click the return key in the upper left corner to exit the player on the same layer.

videoElem.on('x5videoexitfullscreen',function(){}

The last thing to note is that after playing the video on the andriod side, it will not actively exit the player on the same layer. If there is a display interface in the future, it will also be displayed in the player, which feels very weird. This can be solved by link jump.
1.5. Canvas plays video
Canvas can play videos, but on some andriod machines you will see serious aliasing, and some andriod browsers only have sound but no images when playing. .
1.6. Video encoding
Video in mp4 format needs h.264 encoding, otherwise some ios will only have sound but no image.
Finally, a complete video configuration is as follows, for reference only

<video class="js_video" style="object-fit: cover; width: 100%; height: 100%;" preload="load" 
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
 x5-video-orientation="portrait"src="https://video.mdcdn.cn/friend2018.mp4"></video>

Related recommendations:

H5 same-layer Video player access example sharing

How to upgrade H5 hybrid development app

HTML5 audio and video problems and solutions

The above is the detailed content of Problems and solutions encountered in H5 video development. For more information, please follow other related articles on the PHP Chinese website!