透過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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 記一次uniapp video元件影片無法播放問題APPIDE元件
- 以例項說明 OAuth2OAuth
- 舉例說明js滑鼠事件有哪些?JS事件
- Kubernetes 無法查詢到並且無法刪除pod例項的排查過程
- Prime Video for Mac Prime影片播放器IDEMac播放器
- 音訊和影片無法在PowerPoint中播放音訊
- Elmedia Video Player pro Mac影片播放器IDEMac播放器
- video影片標籤播放時js/jQuery顯示播放控制元件會導致播放暫停解決辦法IDEJSjQuery控制元件
- 針對 “測試用例最佳實踐” 的說明
- 萬 能影片播放器:Cisdem Video Player for Mac播放器IDEMac
- Chrome使用video無法正常播放MP4視訊的解決方案ChromeIDE
- 無法連線windows例項的問題排查Windows
- windows10系統無法播放GoPro影片的解決方法WindowsGo
- 人眼疲勞檢測之opencv人眼檢測xml說明OpenCVXML
- pyhanlp使用者自定義詞典新增例項說明HanLP
- win10提示您的flash外掛已過期,無法播放影片怎麼解決Win10
- k8s透過api介面刪除例項K8SAPI
- 舉例說明js立即執行函式的寫法有哪些?JS函式
- 邏輯注入漏洞滲透測試檢測辦法
- TestLink測試用例管理工具使用說明
- Halcon缺陷檢測例項轉OpenCV實現(二) PCB印刷缺陷檢測OpenCV
- Tkinter (01) 基本選項的說明
- Win10播放器無法播放影片如何解決_win10自帶播放器不能播放影片怎麼修復Win10播放器
- 透過Span實現高效能陣列,例項解析陣列
- Halcon缺陷檢測例項轉OpenCV實現(三) 物體凸缺陷檢測OpenCV
- video 自動播放IDE
- 舉例說明如何使用WebSQL?WebSQL
- Vue例項方法之事件的實現Vue事件
- 使用 vue 例項更好的監聽事件Vue事件
- 基於laravel的事件監聽例項Laravel事件
- win10 hevc影片播放器沒有畫面怎麼辦_win10 hevc影片播放器無法播放解決方法Win10播放器
- HTML5的video在有的移動端裝置無法自動播放?怎麼解決?HTMLIDE
- 在 NgModule 裡透過依賴注入的方式註冊服務例項依賴注入
- Docker的通俗理解和透過宿主機埠訪問Redis容器的例項DockerRedis
- buffer busy wait 等待事件說明(轉)AI事件
- 【WAIT】 log file sync等待事件說明AI事件
- Word類報表例項 - 質量檢測報告
- PHP透過session判斷防止表單重複提交例項PHPSession