JS判斷視頻Video的播放、暫停、結束完成及獲取長度事件監聽處理


在日常應用場景中,可能會遇到這么一個情況,需要判斷用戶是否完整的觀看完了一部視頻,在這個場景中,和視頻相關的事件大體涉及到幾個部分,獲取視頻長度,視頻開始播放,暫停播放和播放結束,下面來看下如何通過JavaScript來監聽獲取視頻的這幾種狀態。

 

(1)html頁面視頻標簽大體如下

<video id="video" controls="controls"> <source type="video/mp4" src="mi.mp4"> </video>

 

(2)視頻加載后獲取視頻的長度

<script> var elevideo = document.getElementById("video"); elevideo.addEventListener(‘loadedmetadata‘, function () { //加載數據 //視頻的總長度 console.log(elevideo.duration); }); </script>

 

(3)視頻開始播放

<script> var elevideo = document.getElementById("video"); elevideo.addEventListener(‘play‘, function () { //播放開始執行的函數 console.log("開始播放"); }); </script>

 

(4) 視頻正在播放中

<script> var elevideo = document.getElementById("video"); elevideo.addEventListener(‘playing‘, function () { //播放中 console.log("播放中"); }); </script>

 

(5)視頻加載中

<script> var elevideo = document.getElementById("video"); elevideo.addEventListener(‘waiting‘, function () { //加載 console.log("加載中"); }); </script>

 

(6)視頻暫停播放

<script> var elevideo = document.getElementById("video"); elevideo.addEventListener(‘pause‘, function () { //暫停開始執行的函數 console.log("暫停播放"); }); </script>

豌豆資源搜索網站https://55wd.com 電腦刺綉綉花廠 ttp://www.szhdn.com

(7)視頻結束播放

<script> var elevideo = document.getElementById("video"); elevideo.addEventListener(‘ended‘, function () { //結束 console.log("播放結束"); }, false); </script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM