視頻video標簽在移動端的播放總結

文章地址： http://www.xiabingbao.com/video/2016/09/03/phone-video.html

昨天新上線了一個關於騰訊18周年嘉年華的html5，這個html5是有5段不同的視頻組成，中間使用各種手勢進行串聯，歡迎大家訪問。

眾所周知，在移動端的視頻和音頻都是需要用戶手動點擊開啟的，而使用autoplay或在js里寫play()是沒有任何作用的。還有幾個常見的問題這里也提示一下：

1. iOS不支持preload屬性，android可能會支持，沒太細測試。用戶只有在點擊的時候才會去加載視頻；

2. iOS不支持autoplay屬性，需手動點擊開啟，使用setTimeout延遲開啟也不行；

3. canplaythrough表示可是流暢播放了，但是在android下是沒有卵用的； 有的android下是播放完成后才會觸發。

4. playing表示開始播放了，android下無效；

5. canplay認為是視頻元素沒有問題，可以運行，沒有更多含義了，基本用不上，android下一樣；

6. iOS和android都支持ended事件，但不能在ended事件里啟動一段音頻或視頻，因此不能使用ended進行視頻的循環播放；

7. 有的iOS版本下，會彈出一個全屏播放器來播放視頻，iPad則支持內聯播放。有人說添加webkit-playsinline屬性即可支持內聯播放，不過我這兒並沒有什么卵用。全屏播放后，會造成操作很不流暢，必須關閉視頻的全屏效果，才能進行下一步的操作；

8. 在網絡不太好，或視頻比較大的情況下，在點擊和正式播放的空隙內會有一段等待視頻加載的時間；有時候也會出現只有音頻而沒有畫面的情況。

針對這些問題，有的是系統級的問題（比如調起全屏的播放器，循環播放視頻等），我們無法修改；其他的，我們都盡量地通過程序來實現。

1. 如何獲取視頻的加載進度，讓視頻加載完成后才讓用戶進入？

不能，沒有任何的辦法來判斷視頻的加載進度，而且在iOS中，只有視頻在播放的時候，才臨時去加載視頻。因此，即使在video標簽中寫了preload屬性也是不管用的。使用canplaythrough事件也是沒法檢測的，雖然video標簽在加載的時候會觸發canplaythrough方法，但播放時依然會有卡頓的現象，而且某些android還不支持次屬性。

2. 播放視頻時只有聲音沒有圖像

有部分原因是視頻的編碼不正確，在mp4格式的視頻中，只支持h.264的視頻。我的項目中也遇到了這種情況，但不是視頻編碼的問題。我在自己的網絡下測試時，沒有這樣的問題，但是在外部環境測試時就會出現黑屏、有聲音沒圖像的情況。那么應該就是視頻有點大了，然后我就把視頻壓縮了一下，結果還是會有這樣的情況出現。

經過同事的指點，我在用戶點擊和視頻正式播放之前添加一個loading效果，當視頻正式播放的時候就取消loading。如下：

    function video_loading( $video ){ $('.video_loading').show(); var timer = setInterval(function(){ var currentTime = $video[0].currentTime; // 檢測當前的播放時間 if( currentTime>0 ){ $('.video_loading').hide(); clearInterval( timer ); } }, 100) }

完美解決黑屏和有聲音沒圖像的問題。

3. 在每段視頻的結尾都有向上滑、點擊的操作

我們是無法在視頻上直接進行滑動和點擊等操作的，只能是在視頻播放結束時，添加一個透明遮罩，讓用戶在遮罩上進行操作。

    /** 視頻的播放時間改變時進行的操作 videoid video標簽的id cur 當前播放時間，可以傳入ended參數 func 回調函數 */ videoUpdate : function(videoid, cur, func){ var myVideo = document.getElementById(videoid); if( myVideo ){ if( typeof cur =='number' ){ myVideo.addEventListener('timeupdate', function(){ if( this.currentTime>=cur ){ func(); myVideo.removeEventListener('timeupdate', function(){ }, false); } }, false); }else{ myVideo.addEventListener(cur, function(){ func(); }, false); } } }

使用方法：

    // 第一屏的視頻進行到4秒時，顯示透明圖層以提供用戶操作 tool.videoUpdate( 'video1', 4, function(){ $('.s1 .overlay').show(); }); // 第一屏的視頻結束時，顯示向下滑動提示按鈕 tool.videoUpdate( 'video1', 'ended', function(){ $('.s1 .tip').show(); });

總結

這是第一次做移動端的視頻播放html5，在很多地方還有不足的地方，歡迎大家提出意見和建議。

文章地址： http://www.xiabingbao.com/video/2016/09/03/phone-video.html