video在微信浏览器中的一些问题及解决方案

最近在做微信浏览器中的页面,由于客户需要常常需要内嵌或全屏播放视频。但是在实现过程中问题却是常有常新的。

1.html书写

这是最近做的一个全屏播放的案例(视频是竖版的),html代码如下:

<video id="video" src="http://yili.yowoworld.com/haier1213/video1.mp4" poster="http://yili.yowoworld.com/haier1213/poster.jpg" preload="auto" playsinline x-webkit-airplay webkit-playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" type="video/mp4" style="object-fit:fill;" width="100%" height="100%"></video>

给视频设置了以上属性,在ios和安卓手机中就都可以全屏播放了。

 

2.video属性设置说明

preload:预加载

playsinline / webkit-playsinline : 内联播放

x-webkit-airplay: 貌似是ios的无线播放

x5-video-player-type:启用同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上,也是WeChat安卓版特有的属性。

x5-video-player-fullscreen: 全屏设置。

在实现视频在微信中播放过程中,添加属性性和属性值要慎重,不能随便设置,设置过程中需要细细体会。

 

3.遇到的问题及解决方案

问题1: 在Android的微信里面,就算加上了这个属性(x5-video-player-fullscreen),还会出现上下有黑边,不能全屏的问题。

解决办法: 给video加上object-fit:;的style属性。

 

问题2: 当微信和手机设置的“允许屏幕旋转”同时开启时,在安卓手机中,视频不会跟随系统旋转,而在苹果手机中,视频跟随系统旋转,当旋转完,视频往往就不是满屏了。

解决办法:

window.onresize = function(){
   var width = window.screen.width;
   var height = window.screen.height;
   if(width>height){
     width = [height,height = width[0]];
     video.style.width = width + "px";
       video.style.height = height + "px";
   }
}

 

4.在全屏视频中添加元素

至于在全屏视频中添加元素,也是可以的。只要通过定位设置即可。通过监听视频的当前时间,来实现你想要的效果。

监听视频时间需要通过定时器来实现(定时器的时间根据项目实际需要自行定义)

setInterval(function(obj,t){
   if(obj.currentTime=t){   //可以不使用等号,条件自己看着来
    //满足当前条件时的相关事件
   }
},100)

 

补充一下:在这里也可以使用video 的timeupdate 事件

timeupdate事件  通常与 Audio/Video 对象的 currentTime 属性一起使用,该属性返回音频/视频(audio/video)的播放位置(以秒计)。