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

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

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

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

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

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

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

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

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

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

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

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

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

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

有部分原因是視頻的編碼不正確，在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)
    }

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

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

    /**
        視頻的播放時間改變時進行的操作
        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