当video遇上微信浏览器

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: fill;的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）的播放位置（以秒计）。 

 

 

5.相关链接

http://www.cnblogs.com/baiyygynui/p/6323565.html

http://www.genshuixue.com/i-cxy/p/15488790

https://segmentfault.com/a/1190000008452126