H5 video使用總結

相信作過h5視頻需求的同窗們都會很頭疼，在產品及運營同窗「不就是在手機上播放一段視頻麼？」的簡單想法下，咱們卻遇到了ios、安卓的各類封面不兼容、進度條展現、全屏播放、進度等等各類問題。下面是我在作一些video相關項目的一些總結。

1.封面問題
video標籤提供了poster屬性來展現封面圖。可是在一些安卓手機下，該屬性兼容性太差，各類展現黑屏。
這裏能夠考慮在視頻上層添加一個div來嵌入一張圖片。
能夠採用poster屬性。可是在android下，兼容性太差。能夠考慮在視頻上層加一個div圖片。視頻播放是顯示video，隱藏該圖片便可。
可是通過測試，發現先隱藏video，再展現video時，會出現閃屏現象。這個是由於video爲display:none時，video是屬於未激活狀態。當從新設置display:block時，video被激活。所以會出現閃屏。
這裏建議將視頻設置寬度爲1px。當播放時，能夠將封面隱藏，再將視頻的width設置成100%;

2.全屏播放
ios全屏下全屏能夠添加如下屬性 playsinline="" webkit-playsinline=""
安卓全屏下能夠利用 x5-video-player-type="h5" 騰訊x5內核系的android微信和手Q內置瀏覽器webview內核，再設置x5-video-player-fullscreen="true" 啓用全屏

3.自動播放
andriod下是不容許自動播放的，即便用了video.play()，必需要用戶主動出發，能夠在用戶出發滑屏或者touch的時候，用video.play()自動播放，建議能夠在頁面中加一個loading頁，加一個緩衝按鈕，觸發用戶播放視頻
再者，利用微信提供的WeiXinJsBridgeReady，在微信嵌入webview全局事件出發後，視頻能夠自動播放，可是手Q和其餘瀏覽器仍是須要手動觸發

document.addEventListener("WeiXinJsBridgeReady",function(){
    video.play();
})

4.視頻的緩衝及播放問題
4.1視頻的緩衝
video的bufferd屬性能夠返回TimeRanges對象，表示用戶的視頻緩衝範圍。不過緩衝會返回多個對應，應該以最後一個返回對象爲準。
video.duration表示視頻的總時長。
二者相比便可獲得視頻的緩衝進度，即 video.buffered.end(video.buffered.length-1)/video.duration
4.2視頻的播放
當瀏覽器正在下載指定的音頻/視頻時，會發生 progress 事件；
當瀏覽器可以開始播放指定視頻時，會觸發canplay事件；
當瀏覽器預計可以在不停下來進行緩衝的狀況下持續播放指定的音頻/視頻時，會觸發 canplaythrough 事件。

5.視頻銜接
咱們在在視頻相關的需求時，可能須要播放不止一段視頻。這裏通常有兩種解決方案：
a.將全部的視頻銜接在一塊兒，經過video的currentTime來切換換面(這樣會有兩個問題。1.視頻過大，2.視頻更新不方便)
b.經過src來切換視頻

1.video在切換src時會有短暫的黑屏現象，能夠用靜態圖片來過渡切換過程。
2.在忽然切換src的時候視頻會緩衝視頻顯得不流暢。這裏能夠設置兩個video標籤。利用4.1中的緩衝進度，當第一視頻緩衝完成以後，能夠設置第二個視頻開始緩衝。這樣能夠保證用戶在切換視頻時流暢效果會好一點。