H5开发视频遇到的问题怎么解决-创新互联
H5开发视频遇到的问题怎么解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
成都创新互联专注于曹县企业网站建设,成都响应式网站建设公司,商城网站制作。曹县网站建设公司,为曹县等地区提供建站服务。全流程按需制作网站,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务最近做了一些嵌入视频的活动,积累了点视频方面的经验,下面记录下别人和自己踩过的坑以及相应的解决方案。
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="h6" 可以开启同层播放器,来避免播放后显示推荐视频的问题。 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配置的如下,仅供参考
看完上述内容,你们掌握H5开发视频遇到的问题怎么解决的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:H5开发视频遇到的问题怎么解决-创新互联
标题路径:http://pwwzsj.com/article/jejgc.html