原文地址：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視訊播放優化實踐
微信端視訊播放問題