視頻H5のVideo標籤在微信裏的坑和技巧

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

統一播放效果

咱們但願視頻播放時能夠全屏播放，沒有進度條、播放按鈕等與系統相關的元素，能夠在視頻上方增長自定義的元素（好比一個跳過按鈕），類型下面的效果：

在不一樣的操做系統（主要就是 iOS 和 Android），爲了達到比較統一的播放效果，分別對其進行兼容。

iOS

在 iOS 上，APP 都是使用的系統自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統一的，只須要考慮不一樣的 iOS 版本是否有不一致的地方。在 iOS 上，播放視頻默認會彈出一個播放器全屏播放視頻，以下效果

播放器上下有的系統默認的控制欄，能夠控制視頻的播放進度、音量以及暫停或繼續播放，播放視頻時，視頻會 「浮」 在頁面上，頁面上的全部元素都只能是在視頻下面，這種效果顯然不是咱們想要的。
但好在 iOS 10 Safari 中，video 新增了 playsinline 屬性，可使視頻內聯播放。

在 webkit 的 blog 上提到

A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline.

iOS 10 以前的版本支持 webkit-playsinline，可是加了這個屬性後，在 iOS 9 的上出現只能聽到聲音不能看到畫面的問題，最後使用的標籤代碼

1	<video id="video" class="video" preload="auto" playsinline src="http://wqs.jd.com/promote/superfestival/superfestival.mp4" width="1" height="1" type="video/mp4"></video>

而後再加上這個庫 iphone-inline-video一塊兒使用。

Android

在 Android 上，由於各個軟件使用的瀏覽器渲染引擎不同，因此視頻播放的效果差別也很大，這裏主要以微信爲主。微信使用的是自帶的渲染引擎 TBS，默認的播放效果

在播放器的下方也是會有控制欄，視頻也會 「浮」 在頁面上。而 Android 是不支持 playsinline 屬性使視頻內聯播放的。可是，若是你看過一些騰訊的視頻類 HTML5，會發現它們在微信裏是能夠內聯播放的，而這個功能是須要申請加入白名單的。

不過新版的 TBS 內核（>=036849）支持一個叫 同層播放器 的視頻播放器，這個不須要申請白名單，只需給 video 設置兩個屬性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"，播放效果

當點擊左上角的箭頭的時，會退出播放

退出播放時，咱們須要作相應的處理。TBS 有提供相應的事件，不過不一樣的版本有一點差別

	TBS < 036849	036849 <= TBS < 036900	036900 <= TBS
是否支持同層播放器	否	是	是
退出全屏播放時觸發		x5videoenterfullscreen	x5videoexitfullscreen
進入全屏播放時觸發		x5videoexitfullscreen	x5videoenterfullscreen

經過監聽這兩個事件就能夠知道當前的播放狀態

1 2 3 4 5 6 7

document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){ alert( "exit fullscreen") })   document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){ alert( "enter fullscreen") })

在對話框中發送 //gettbs 能夠查看相關信息，tbsCoreVersion 就是當前安裝的 TBS 內核版本。

video 的事件

video 支持的事件不少，但在有些事件在不一樣的系統上跟預想的表現不一致，在嘗試比較以後，使用 timeupdate 和 ended這兩個事件基本能夠知足需求

1 2 3 4 5 6 7

video.addEventListener( 'timeupdate', function (e) { console.log(video.currentTime) // 當前播放的進度 })   video.addEventListener( 'ended', function (e) { // 播放結束時觸發 })

視頻居中

視頻的寬高比是固定的，而手機的屏幕寬高比則不是，因此，爲了讓觀看到的視頻的體驗儘量一致，以寬度爲先，進行適配

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function handleResize() { var sWidth = 9 var sHeight = 16 var width = window.innerWidth var height = window.innerHeight var marginTop = height - (width * sHeight) / sWidth   marginTop = Math.round(marginTop) if (marginTop < -2) { video.$wrapper.css( 'marginTop', marginTop / 2 + 'px') } else { video.$wrapper.css( 'marginTop', '0') } }

示例

在線示例
代碼倉庫

代碼基於 ELF 構建，運行示例須要 安裝 ELF，歡迎試用反饋。