H5视频运动踩坑

2024年5月15日 169次阅读 来源: jsonLi

近来做了一些嵌入视频的运动，积聚了点视频方面的履历，下面记录下别人和本身踩过的坑以及响应的处理方案。
1、碰到题目和处理方案
1.1、ios 网页中播放视频默许全屏（点击视频会弹出播放器举行全屏播放）。
处理不全屏播放能够增加以下属性webkit-playsinline=’true’ 和 playsinline=’true’ 假如设置上面属性还没有结果，那末能够再合营下面这个插件尝尝。 iphone-inline-video
备注：ios下在微博中翻开网页播放视频会弹出播放器播放，设置playsinline属性无效，还必须运用上面谁人插件，亲测有用。
1.2、andriod中video播放完后显现引荐视频
挪动端浏览器中的video元素是比较迥殊的，初期无论是在iOS照样Android的浏览器中，它都位于页面的最顶层，没法被遮掩。厥后这个题目在iOS下得到了处理，然则Android的浏览器则题目照旧。X5是腾讯基于Webkit开辟的衬着引擎，它供应了一种名叫「同层播放器」的特别video元素以处理遮掩题目。经由过程设置

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>
    原文作者：jsonLi
    原文地址: https://segmentfault.com/a/1190000013403898
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞