视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
H5开发视频遇到的问题及解决方案
2020-11-27 15:06:28 责编:小采
文档


最近做了一些嵌入视频的活动,积累了点视频方面的经验,下面记录下别人和自己踩过的坑以及相应的解决方案。
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.2编码方式,不然某些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>

下载本文
显示全文
专题