透過video的timeupdate事件檢測影片無法播放例項說明

pswyjz發表於2021-09-09

需求說明:

影片正文頁在做影片聯播時會遇到影片無法播放或者解析異常的情況,希望遇到有問題影片時可以跳過當前影片。

事件說明:

Video物件可以透過ontimeupdate事件來報告當前的播放進度,即在播放位置發生改變時觸發該事件,我們可以透過監聽該事件來判斷影片是否正常播放。

例項說明:

影片無法播放是影片點選播放按鈕後停留在0秒,此時已經觸發timeupdate事件。影片解析異常則是不會觸發timeupdate事件,所以例項中我們透過這兩種方式來進行判斷。

var videoJudje = false;//用於判斷無法解析var currentTime = 0;//用於判斷無法播放var videoDom = document.getElementById("video");function getWrongVideo(videoDom){    var videoWrong;//定時器   
    videoDom.addEventListener("timeupdate",videoShow,"false");    function videoShow(){
        videoJudje = true;
        currentTime = videoDom.currentTime;        if(currentTime > 1){
           videoDom.removeEventListener("timeupdate",videoShow,"false");
            clearTimeout(videoWrong); 
        }
    };
    videoWrong = setTimeout(function(){       if(videoJudje == false||currentTime == 0){            //此處新增發現錯誤影片之後的處理函式                                  
            videoDom.removeEventListener("timeupdate",videoShow,"false");
        } 
    },5000);
}

缺陷說明:

  • 雖然條件判斷為currentTime>1時移除timeupdate監聽,但是由於執行時間的問題,通常currentTime到4、5秒才執行移除。

  • 透過定時器延遲5秒來判斷影片是否出問題,在網速等相關問題的影響下,會發生誤判,及好的可以正常播放的影片也會被判斷為有問題的,所以該判斷無法達到絕對準確
    ps:有錯誤的地方還請多多指教



作者:進擊的程式茗
連結:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/755/viewspace-2812909/,如需轉載,請註明出處,否則將追究法律責任。

相關文章