H5 Video踩坑記錄

臨時接手一個即將上線的公司項目，純H5活動頁，內容很少，但對還原度和各機型兼容性（尤爲是Android機型）有極高要求。涉及的問題不少，這裏重點說下在H5中Video的一系列坑。插個技術選型問題，不復雜的活動頁建議使用jquery技術棧，而不是使用vue和reactjs等。後者的優勢在於組件系統，可複用度高，適合大型項目。活動頁通常UI改動頻繁，動效多，適合jquery插件生態，添加也方便。筆者半道接替該vue項目，中間要加一些新特性，還得看看有沒有對應的vue輪子，十分麻煩。

效果請戳：H5 Video（在移動端模式查看）

1.基本video屬性設置

1. poster：視頻未播放前的代替圖片，若是未設置該屬性，默認使用視頻第一幀（但小部分機型兼容性很差）。建議添加

2. muted: 靜音. 建議添加

3. webkit-playsinline/playsinline: 視頻播放時局域播放，不脫離文檔流 。基本保證iphone手機在H5頁面內播放。個別不支持能夠引入第三方庫iphone-inline-video。建議添加

4. x5-video-player-type="h5"/x5-playsinline: 啓用同層H5播放器，保證anroid手機在H5頁面內播放，但在各android機型下表現不一。建議添加

<video ref="video" :poster="startSource" muted x-webkit-airplay="allow" x5-video-player-type="h5" x5-playsinline webkit-playsinline playsinline>
    <source :src="videoSource" type="video/mp4" />
</video>
複製代碼

2.自動播放

先說結論：若是須要微信/網易雲音樂/微博/QQ/瀏覽器等各平臺完美自動播放，不行。正確的解決方案：讓視覺設計引導用戶點擊屏幕，進行播放視頻。或者若是產品能接受，只要用戶接觸屏幕就開始播放(監聽touchstart事件)。錯誤方式：video標籤autoplay 、js執行video.play、load完成後執行play()

只在微信端傳播。微信瀏覽器是通過特殊處理的，能夠經過回調WeixinJSBridgeReady解決，適用於iPhone和android。注意自動播放的視頻要無音軌或者手動muted。見示例代碼：

<!-- 必須加在微信api資源 --> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

let that = this
if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        video.play()
    }, false);
} else {
    document.addEventListener("WeixinJSBridgeReady", function () {
        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            video.play()
        });
    }, false);
}
複製代碼

3.視頻開始短暫黑屏

部分android機型點擊播放視頻時，會出現短暫1~2s的黑屏。該問題出現多是還沒請求完成可順利播放的視頻。

解決方案：在視頻上疊加一個div，把它的背景圖換成首幀圖。監聽timeupdate事件，有視頻播放時移除該div。

<div @click="play">
      <video ref="video" :class="{'playing': playing}" :poster="startSource" x-webkit-airplay="allow" x5-video-player-type="h5" x5-playsinline webkit-playsinline playsinline>
        <source :src="videoSource" type="video/mp4" />
      </video>
      <div :class="['cover-start']" v-if="!playing"></div>
    </div>
複製代碼

this.videoNode.addEventListener('timeupdate', () => {
    // 當視頻的currentTime大於0.1時表示黑屏時間已過，已有視頻畫面，能夠移除浮層
    if (this.videoNode.currentTime > 0.1 && !this.playing) {
        this.playing = true
    }
}, false)
複製代碼

4.部分Android機跳到x5 player播放視頻

有些android在微信或瀏覽器，播放視頻會跳到x5 player播放器中。這種video位於頁面最頂層，沒法被遮蓋，說不定播完會推送騰訊視頻信息，並且不會自動關掉。

解決方案：利用timeupdate事件，當視頻快要結束時，手動remove掉整個視頻。

this.videoNode.addEventListener('timeupdate', () => {
    // 兼容Android X5在瀏覽器行爲.時間爲視頻時長
    if (this.videoNode.currentTime > 56.9) {
        this.isShowVideo = false
    }
}, false)
複製代碼

5.視頻canplay的坑

換了引導用戶的視頻方案後，前面有個loading頁面。產品但願視頻加載好後，loading消失並視頻可點擊。可是ios下canplay和canplaythrough事件都不會執行回調。ios是點擊播放後纔會去加載視頻流。android下會執行canplay事件回調，但視頻流也是邊下邊播。因此沒法準確得到視頻可加載時間點

總結：H5如今視頻標準不完善，除了timeupdate、ended事件外，其餘事件慎用。

6.safari能夠縮放視頻

一般狀況在meta的viewport中設置user-scalable=no便可。可是IOS 10之後的safari中，apple爲了提升Safari中網站的輔助功能，即便網站在視口中設置該屬性，用戶也能夠手動縮放。

解決方案：

// IOS10 Safari不識別meta，故須要js hack
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches && event.touches.length > 1) {
    event.preventDefault()
}
}, false)
複製代碼