當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