H5 video activity stepped pit

Recently I made some embedded video activity, points accumulated experience video area, under others and themselves stepped pit and the corresponding solutions to record below.
1, encountered problems and solutions
1.1, the default web ios play video full screen (click on the video player will pop up full-screen playback).
Not solve the full-screen playback can add the following properties webkit-playsinline = 'true' and playsinline = 'true' if not set the above properties also effect, you can try again with the following plug. iphone-inline-video
NOTE: The following ios open a Web page will pop up play video player to play, set playsinline property is invalid, must also use the plugin above, effective pro-test microblogging.
1.2, andriod in the video player to display suggested videos after the
mobile terminal browser video elements are quite special, whether it is early in the iOS or Android browser, which are located at the top of the page, it can not be covered. Later, this issue has been addressed in iOS, but Android browser is the problem remains. Tencent X5 is developed based on Webkit rendering engine, which provides special video elements of a name of "the same level players" to resolve the issue cover. By setting

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

1.3 video adapter
currently designers generally in accordance with standard iphone5 or iphone7 to design the video, general video can be played by a 100% width and height, if you find a video that does not work then you need to set the object-fit properties according to the actual situation to solve a. See half-depth understanding of CSS3 object-position / object-fit properties
NOTE: In webkit core browser, the default is object-fit: contain.
1.4, js control video playback
video and audio are generally not take the initiative to play in ios, unless the user to click on the initiative, so it is necessary to control the playback of the video by js interactively monitor interface.
Play and pause the video mainly calls the play and pause methods. And if video playback requires some user interaction is mainly to monitor the current playback time by timeupdate method, see the section 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');
        }
    });

Listen timeupdate event in ios and paused video when the need to introduce a global isStop variable, or click Continue to play the next time did not respond (timeupdate when triggered repeatedly pause), but andriod is not the problem. Video monitor can determine the end of the video ended event

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

Or video monitor timeupdate event, and then judge ended property, if it is true it means the end, false means not an end.

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

Also in the andriod is enabled with the same level player, micro-channel terminal also offers two players the listener into the same layer and the same layer of the player exit event. Enter player events in the same layer (to start playing the video).

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

Click the top left corner of the back key to exit the same level player.

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

Finally, it should be noted that after playing the video at the end andriod will not take the initiative to withdraw from the same layer of the player. If there is follow-interface display, will show in the player, it feels weird. Here you can be resolved through links to jump.
1.5, canvas play video
canvas can play video, but in some andriod machine will see a very serious jagged, and when some andriod browser to play only the sound but no picture.
1.6, video encoding
video to h.264 mp4 format encoding, or some ios only sound but no picture.
Finally, a complete video configuration below for reference

<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>

Guess you like