【轉】視頻H5 video最佳實踐

原文地址：https://github.com/gnipbao/iblog/issues/11

隨着 4G 的廣泛以及 WiFi 的普遍使用，手機上的網速已經足夠穩定和高速，以視頻爲主的 HTML5 也愈來愈廣泛了，相比幀動畫，視頻的表現更加豐富，這裏介紹一些實踐經驗

video的屬性

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg"  // 視頻封面
  preload="auto" 
  webkit-playsinline="true" /* 這個屬性是ios 10中設置可讓視頻在小窗內播放，也就是否是全屏播放*/  
  playsinline="true"  // IOS微信瀏覽器支持小窗內播放
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  // 啓用H5播放器,是wechat安卓版特性
  x5-video-player-fullscreen="true" // 全屏設置，設置爲 true 是防止橫屏
  x5-video-orientation="portraint" // 播放器的方向， landscape橫屏，portraint豎屏，默認值爲豎屏
  style="object-fit:fill">
</video>

• src: 視頻的地址
• controls: 加上這個屬性，Gecko 會提供用戶控制，容許用戶控制視頻的播放，包括音量，跨幀，暫停/恢復播放。
• poster: 屬性規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。若是未設置該屬性，則使用視頻的第一幀來代替。
• preload: 屬性規定在頁面加載後載入視頻。
• webkit-playsinline和playsinline: 視頻播放時局域播放，不脫離文檔流 。可是這個屬性比較特別， 須要嵌入網頁的APP好比WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，若是APP不設置，你頁面中加了這標籤也無效，這也就是爲何安卓手機WeChat 播放視頻老是全屏，由於APP不支持playsinline，而ISO的WeChat卻支持。
  這裏就要補充下，若是是想作全屏直播或者全屏H5體驗的用戶，IOS須要設置刪除 webkit-playsinline 標籤，由於你設置 false 是不支持的 ，安卓則不須要，由於默認全屏。但這時候全屏是有播放控件的，不管你有沒有設置control。 作直播的可能用得着播放控件，可是全屏H5是不須要的，那麼去除全屏播放時候的控件，須要如下設置：同層播放
• x-webkit-airplay="allow" : 這個屬性應該是使此視頻支持ios的AirPlay功能。使用AirPlay能夠直接從使用iOS的設備上的不一樣位置播放視頻、音樂還有照片文件，也就是說經過AirPlay功能能夠實現影音文件的無線播放，固然前提是播放的終端設備也要支持相應的功能
• x5-video-player-type: 啓用同層H5播放器，就是在視頻全屏的時候，div能夠呈如今視頻層上，也是WeChat安卓版特有的屬性。同層播放別名也叫作沉浸式播放，播放的時候看似全屏，可是已經除去了control和微信的導航欄，只留下"X"和"<"兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時不支持iOS。至於爲何同層播放只對安卓開放，是由於安卓不能像ISO同樣局域播放，默認的全屏會使得一些界面操做被阻攔，若是是全屏H5還好，可是作直播的話，諸如彈幕那樣的功能就沒法實現了，因此這時候同層播放的概念就解決了這個問題。不過在測試的過程當中發現，不一樣版本的IOS和安卓效果略有不一樣
• x5-video-orientation: 聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認值portraint。不管是直播仍是全屏H5通常都是豎屏播放，可是這個屬性須要x5-video-player-type開啓H5模式
• x5­-video­-player­-fullscreen:全屏設置。它又兩個屬性值，ture和false，true支持全屏播放，false不支持全屏播放。其實，IOS 微信瀏覽器是Chrome的內核，相關的屬性都支持，也是爲何X5同層播放不支持的緣由。安卓微信瀏覽器是X5內核，一些屬性標籤好比playsinline就不支持，因此始終全屏。

全屏處理

• ios
  ios加playsinline屬性，以前只帶webkit前綴的在ios10之後，會弔起系統自帶播放器，兩個屬性都加上基本ios端均可以保證內斂到瀏覽器webview裏面了。若是仍有個別版本的ios會弔起播放器，還能夠引用一個庫iphone-inline-video（具體用法很簡單看它github，這裏不介紹了，只需加js一句話，css加點），github地址加上playsinline webkit-playsinline這兩個屬性和這個庫基本能夠保證ios端沒有問題了（不過親測，只加這兩個屬性不引入庫好像也是ok的，至今沒有在ios端微信沒有出現問題，若是你要兼容uc或者qq的瀏覽器建議帶上這個庫）.
• android
  x5-video-player-type="h5"屬性，騰訊x5內核系的android微信和手Q內置瀏覽器用的瀏覽器webview的內核，使用這個屬性在微信中視頻會有不一樣的表現，會呈現全屏狀態，貌似播放控件剝去了，至少加了這個屬性後視頻上層能夠有其餘dom元素出現了（非騰訊白名單機制的一種處理措施）。

<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>

自動播放

android始終不能自動播放，很少說。值得一提的是經測如今ios10後版本的safari和微信都不讓視頻自動播放了（順帶音頻也不能自動播放了），但微信提供了一個事件WeixinJSBridgeReady，在微信嵌入webview全局的這個事件觸發後，視頻仍能夠自動播放，這個應該是如今在ios端微信的視頻自動播放的比較靠譜的方式，其餘如手q或者其餘瀏覽器，建議就引導用戶出發觸屏的行爲操做出發比較好。

document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

ios10之後對於video出了新策 感興趣能夠了解一波 https://webkit.org/blog/6784/new-video-policies-for-ios/

播放控制

對於video或者audio等媒體元素，有一些方法，經常使用的有play(),pause();也有一些事件，如loadstart,canplay,canplaythrough,ended,timeupdate....等等。
在移動端有一些坑須要注意，不要輕易使用媒體元素的除ended,timeupdate之外event事件，在不一樣的機子上可能有不一樣的狀況產生，例如：ios下監聽canplay和canplaythrough（是否已緩衝了足夠的數據能夠流暢播放）,當加載時是不會觸發的，即便preload="auto"也沒用，但在pc的chrome調試器下和android下，是會在加載階段就觸發。ios須要播放後纔會觸發。總之就是如今的視頻標準還不盡完善，有不少坑要注意，要使用前最好本身親測一遍。就是當第一次播放視頻的時候ios端，若是網絡慢，視頻從開始播到能展示畫面會有短暫的黑屏（處理視頻源數據的時間），爲了不這個黑屏，能夠在視頻上加個div浮層（能夠一個假的視頻第一幀），而後用timeupdate方法監聽，視屏播放及有畫面的時候再移除浮層。

video.addEventListener('timeupdate',function (){
    //當視頻的currentTime大於0.1時表示黑屏時間已過，已有視頻畫面，能夠移除浮層（.pagestart的div元素）
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

隱藏播放控件

聽說騰訊的android團隊的x5內核團隊放開了視頻播放的限制，視頻不必定調用它們那個備受詬病的視頻播放器了，x5-video-player-type="h5"屬性這個屬性好像就有點那個意思，雖然體驗仍是有點...（導航欄也會清理）但至少播放器控件沒有了，上層能夠浮div或者其餘元素了，這個仍是值得一提。還有一點值得說的是，帶播放器控件的隱藏.

<div class="videobox" ontouchmove="return false;">
    <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

好比這個videobox在android下隱藏，只用display：none貌似仍是不行的，但加個z-index:-1，設置成-1就能夠達到隱藏播放器控件的目的了。

參考文章

html5--移動端視頻video的android兼容，去除播放控件、全屏等
MDN-Video
視頻H5のVideo標籤在微信裏的坑和技巧
移動端HTML5視頻播放優化實踐
微信端視頻播放問題