H5开发视频遇到的问题及解决方案

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

1.3、视频的适配
目前设计师一般是按照iphone5或者iphone7的标准去设计视频，一般可以通过宽高100%来播放视频，如果发现视频还是不行那么就需要根据实际情况设置 object-fit属性来解决了。 详见半深入理解CSS3 object-position/object-fit属性
备注：在webkit内核浏览器下，默认是object-fit:contain。
1.4、js控制视频的播放
在ios中视频和音频一般都不会主动播放，除非用户主动去点击，所以需要通过js来监听界面的交互来控制视频的播放。
视频的播放和暂停主要是调用play和pause方法。 而视频播放过程中如果需要一些用户的交互主要是通过timeupdate方法来监听当前的播放时间，看一段代码：

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');
        }
    }
    );
    

在ios中监听timeupdate事件并暂停的视频的时候需要引入一个全局的isStop变量，不然下次点击继续播放的时候没反应（timeupdate的时候触发了多次暂停），但是andriod是没有这个问题的。 判断视频结束可以监听视频的ended事件

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

或者监听视频的timeupdate事件，然后判断ended属性，如果为true则表示结束，false表示未结束。

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

另外在andriod端开启了同层播放器，微信端也提供了2个监听进入同层播放器和退出同层播放器的事件。 进入同层播放器事件（开始播放视频）。

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

点击左上角返回键退出同层播放器。

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

最后需要注意的是在andriod端播放视频后是不会主动退出同层播放器的。后续如果有展示的界面，也会在播放器中展示，感觉很怪异。这里可以通过链接跳转来解决。
1.5、canvas播放视频
canvas可以播放视频，但是在某些andriod机上会看到有很严重的锯齿，并且有些andriod浏览器播放的时候只有声音而没有图像。
1.6、视频编码
mp4格式的视频要h.264编码方式，不然某些ios只有声音而没有图像。
最后，一个完整的video配置的如下，仅供参考

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>
    

相关推荐：

H5同层Video播放器接入实例分享

H5混合开发app如何升级

HTML5音频与视频问题及解决方法

以上就是H5开发视频遇到的问题及解决方案的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！