當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:
解決辦法: 給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
當video遇上微信瀏覽器