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)
5.相关链接
http://www.cnblogs.com/baiyygynui/p/6323565.html
http://www.genshuixue.com/i-cxy/p/15488790
https://segmentfault.com/a/1190000008452126
