視頻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