当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