隨着 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')
}
}
|