摘要：在每段視頻的結(jié)尾都有向上滑點(diǎn)擊的操作我們是無(wú)法在視頻上直接進(jìn)行滑動(dòng)和點(diǎn)擊等操作的，只能是在視頻播放結(jié)束時(shí)，添加一個(gè)透明遮罩，讓用戶在遮罩上進(jìn)行操作。

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

昨天新上線了一個(gè)關(guān)于騰訊18周年嘉年華的html5，這個(gè)html5是有5段不同的視頻組成，中間使用各種手勢(shì)進(jìn)行串聯(lián)，歡迎大家訪問(wèn)。

眾所周知，在移動(dòng)端的視頻和音頻都是需要用戶手動(dòng)點(diǎn)擊開(kāi)啟的，而使用autoplay或在js里寫(xiě)play()是沒(méi)有任何作用的。還有幾個(gè)常見(jiàn)的問(wèn)題這里也提示一下：

iOS不支持preload屬性，android可能會(huì)支持，沒(méi)太細(xì)測(cè)試。用戶只有在點(diǎn)擊的時(shí)候才會(huì)去加載視頻；

iOS不支持autoplay屬性，需手動(dòng)點(diǎn)擊開(kāi)啟，使用setTimeout延遲開(kāi)啟也不行；

canplaythrough表示可是流暢播放了，但是在android下是沒(méi)有卵用的； 有的android下是播放完成后才會(huì)觸發(fā)。

playing表示開(kāi)始播放了，android下無(wú)效；

canplay認(rèn)為是視頻元素沒(méi)有問(wèn)題，可以運(yùn)行，沒(méi)有更多含義了，基本用不上，android下一樣；

iOS和android都支持ended事件，但不能在ended事件里啟動(dòng)一段音頻或視頻，因此不能使用ended進(jìn)行視頻的循環(huán)播放；

有的iOS版本下，會(huì)彈出一個(gè)全屏播放器來(lái)播放視頻，iPad則支持內(nèi)聯(lián)播放。有人說(shuō)添加webkit-playsinline屬性即可支持內(nèi)聯(lián)播放，不過(guò)我這兒并沒(méi)有什么卵用。全屏播放后，會(huì)造成操作很不流暢，必須關(guān)閉視頻的全屏效果，才能進(jìn)行下一步的操作；

在網(wǎng)絡(luò)不太好，或視頻比較大的情況下，在點(diǎn)擊和正式播放的空隙內(nèi)會(huì)有一段等待視頻加載的時(shí)間；有時(shí)候也會(huì)出現(xiàn)只有音頻而沒(méi)有畫(huà)面的情況。

針對(duì)這些問(wèn)題，有的是系統(tǒng)級(jí)的問(wèn)題（比如調(diào)起全屏的播放器，循環(huán)播放視頻等），我們無(wú)法修改；其他的，我們都盡量地通過(guò)程序來(lái)實(shí)現(xiàn)。

不能，沒(méi)有任何的辦法來(lái)判斷視頻的加載進(jìn)度，而且在iOS中，只有視頻在播放的時(shí)候，才臨時(shí)去加載視頻。因此，即使在video標(biāo)簽中寫(xiě)了preload屬性也是不管用的。使用canplaythrough事件也是沒(méi)法檢測(cè)的，雖然video標(biāo)簽在加載的時(shí)候會(huì)觸發(fā)canplaythrough方法，但播放時(shí)依然會(huì)有卡頓的現(xiàn)象，而且某些android還不支持次屬性。

有部分原因是視頻的編碼不正確，在mp4格式的視頻中，只支持h.264的視頻。我的項(xiàng)目中也遇到了這種情況，但不是視頻編碼的問(wèn)題。我在自己的網(wǎng)絡(luò)下測(cè)試時(shí)，沒(méi)有這樣的問(wèn)題，但是在外部環(huán)境測(cè)試時(shí)就會(huì)出現(xiàn)黑屏、有聲音沒(méi)圖像的情況。那么應(yīng)該就是視頻有點(diǎn)大了，然后我就把視頻壓縮了一下，結(jié)果還是會(huì)有這樣的情況出現(xiàn)。

經(jīng)過(guò)同事的指點(diǎn)，我在用戶點(diǎn)擊和視頻正式播放之前添加一個(gè)loading效果，當(dāng)視頻正式播放的時(shí)候就取消loading。如下：

    function video_loading( $video ){
        $(".video_loading").show();

        var timer = setInterval(function(){
            var currentTime = $video[0].currentTime; // 檢測(cè)當(dāng)前的播放時(shí)間

            if( currentTime>0 ){
                $(".video_loading").hide();
                clearInterval( timer );
            }
        }, 100)
    }

完美解決黑屏和有聲音沒(méi)圖像的問(wèn)題。

我們是無(wú)法在視頻上直接進(jìn)行滑動(dòng)和點(diǎn)擊等操作的，只能是在視頻播放結(jié)束時(shí)，添加一個(gè)透明遮罩，讓用戶在遮罩上進(jìn)行操作。

    /**
        視頻的播放時(shí)間改變時(shí)進(jìn)行的操作
        videoid video標(biāo)簽的id
        cur 當(dāng)前播放時(shí)間，可以傳入ended參數(shù)
        func 回調(diào)函數(shù)
    */
    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);
            }
        }
    }

使用方法：

    // 第一屏的視頻進(jìn)行到4秒時(shí)，顯示透明圖層以提供用戶操作
    tool.videoUpdate( "video1", 4, function(){
        $(".s1 .overlay").show();
    });

    // 第一屏的視頻結(jié)束時(shí)，顯示向下滑動(dòng)提示按鈕
    tool.videoUpdate( "video1", "ended", function(){
        $(".s1 .tip").show();
    });

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

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