透過video的timeupdate事件檢測影片無法播放例項說明
需求說明:
影片正文頁在做影片聯播時會遇到影片無法播放或者解析異常的情況,希望遇到有問題影片時可以跳過當前影片。
事件說明:
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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 事件檢視器事件ID部分說明事件
- 11G透過物理standby進行滾動升級例項說明及注意
- 以例項說明 OAuth2OAuth
- Prime Video for Mac Prime影片播放器IDEMac播放器
- 用三個例項說明python類多型和過載。Python多型
- 音訊和影片無法在PowerPoint中播放音訊
- Elmedia Video Player pro Mac影片播放器IDEMac播放器
- 透過itm UA實現的Tuxedo監控資訊說明UX
- SoapUI壓力測試的指標項說明UI指標
- video影片標籤播放時js/jQuery顯示播放控制元件會導致播放暫停解決辦法IDEJSjQuery控制元件
- Kubernetes 無法查詢到並且無法刪除pod例項的排查過程
- 萬 能影片播放器:Cisdem Video Player for Mac播放器IDEMac
- windows10系統無法播放GoPro影片的解決方法WindowsGo
- 反NP監視原理並有例項說明
- Oracle內建事件的說明Oracle事件
- 人眼疲勞檢測之opencv人眼檢測xml說明OpenCVXML
- Chrome使用video無法正常播放MP4視訊的解決方案ChromeIDE
- win10提示您的flash外掛已過期,無法播放影片怎麼解決Win10
- 11G通過邏輯standby滾動升級例項說明及注意
- jQuery實現的滑鼠滑過圖片上縮彈出文字說明程式碼例項jQuery
- Mongoose使用population建立關係連結例項說明Go
- latch free 等待事件說明事件
- 邏輯注入漏洞滲透測試檢測辦法
- oracle常見的等待事件說明Oracle事件
- Win10播放器無法播放影片如何解決_win10自帶播放器不能播放影片怎麼修復Win10播放器
- 無法連線windows例項的問題排查Windows
- 11G通過物理standby進行滾動升級例項說明及注意
- java中的單例模式,舉例說明。Java單例模式
- pyhanlp使用者自定義詞典新增例項說明HanLP
- 【AMM】關於資料庫例項AMM引數說明資料庫
- 一張圖說明 函式, 例項(物件), 原型之間的關係函式物件原型
- 透過例項看VCL元件開發全過程(一) (轉)元件
- 透過例項看VCL元件開發全過程(二) (轉)元件
- win10 hevc影片播放器沒有畫面怎麼辦_win10 hevc影片播放器無法播放解決方法Win10播放器
- unity3d 事件說明Unity3D事件
- Oracle常見等待事件說明Oracle事件
- latch free 等待事件說明(轉)事件
- GI安裝選項的說明