H5视频活动踩坑

walterrwu 发布于2019-08-30 14:01 / 3145人阅读

摘要：最近做了一些嵌入视频的活动，积累了点视频方面的经验，下面记录下别人和自己踩过的坑以及相应的解决方案。视频的播放和暂停主要是调用和方法。最后需要注意的是在端播放视频后是不会主动退出同层播放器的。

最近做了一些嵌入视频的活动，积累了点视频方面的经验，下面记录下别人和自己踩过的坑以及相应的解决方案。
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配置的如下，仅供参考

云服务器 GPU云服务器 h5 视频通话 h5 视频加密 h5 实时视频 h5视频通话

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115715.html

H5视频活动踩坑

摘要：最近做了一些嵌入视频的活动，积累了点视频方面的经验，下面记录下别人和自己踩过的坑以及相应的解决方案。视频的播放和暂停主要是调用和方法。最后需要注意的是在端播放视频后是不会主动退出同层播放器的。最近做了一些嵌入视频的活动，积累了点视频方面的经验，下面记录下别人和自己踩过的坑以及相应的解决方案。1、碰到问题和解决方案1.1、ios 网页中播放视频默认全屏（点击视频会弹出播放器进行全屏播放...

jzman 2019-08-01 18:39 评论0 收藏0
H5视频活动踩坑

摘要：最近做了一些嵌入视频的活动，积累了点视频方面的经验，下面记录下别人和自己踩过的坑以及相应的解决方案。视频的播放和暂停主要是调用和方法。最后需要注意的是在端播放视频后是不会主动退出同层播放器的。最近做了一些嵌入视频的活动，积累了点视频方面的经验，下面记录下别人和自己踩过的坑以及相应的解决方案。1、碰到问题和解决方案1.1、ios 网页中播放视频默认全屏（点击视频会弹出播放器进行全屏播放...

DirtyMind 2019-08-22 14:53 评论0 收藏0
h5视频播放踩坑记录

随着抖音、快手这类的视频类app的火爆，移动端h5视频类应用也随之兴起，使用video播放的场景也越来越多，本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题，希望在看过这篇文章后，能对开发者在移动端使用video播放时快速开发减少踩坑全屏播放视频的全屏播放是移动端一个很常见的场景，因此我们需要对video设置全屏播放，全屏播放用到的方法是requestFullscre...

wenshi11019 2019-08-23 16:18 评论0 收藏0
h5视频播放踩坑记录

随着抖音、快手这类的视频类app的火爆，移动端h5视频类应用也随之兴起，使用video播放的场景也越来越多，本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题，希望在看过这篇文章后，能对开发者在移动端使用video播放时快速开发减少踩坑全屏播放视频的全屏播放是移动端一个很常见的场景，因此我们需要对video设置全屏播放，全屏播放用到的方法是requestFullscre...

heartFollower 2019-08-02 16:09 评论0 收藏0