復制代碼代碼如下: var myVideo = document.getElementById('myVideo');//獲取video元素 myVideo.addEventListener("loadedmetadata", function(){ //要執行的代碼 }); 好了，已經監聽了，那么接下來要做的就是獲取總時長，其實就是一個屬性-duration var myVideo = document.getElementById('myVideo')//獲取video元素 ,tol = 0 ; myVideo.addEventListener("loadedmetadata", function(){ tol = myVideo.duration;//獲取總時長 }); 需要注意的是獲取到的在總時長的單位為秒，顯示的時候根據需要去轉換。 第二、播放、暫停對播放器來說最基本的一個功能就是播放和暫停了，而在獲取總時長后，接著的操作也就是播放和暫停。這個時候用到了video的兩個方法就是play和pause
復制代碼代碼如下: var myVideo = document.getElementById('myVideo')//獲取video元素 ,tol = 0 ; myVideo.addEventListener("loadedmetadata", function(){ tol = myVideo.duration;//獲取總時長 }); /p p //播放 function play(){ myVideo.play(); } /p p //暫停 function pause(){ myVideo.pause(); }
復制代碼代碼如下: //設置音量 function setVol(num){ myVideo.volume = num; }
下面是完整的代碼：
復制代碼代碼如下: !DOCTYPE html html head title Video step2 /title meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/ /head body video id="myVideo" controls preload="auto" width=300 height="165" poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" /video script var myVideo = document.getElementById('myVideo')//獲取video元素 ,tol = 0 //總時長 ; myVideo.addEventListener("loadedmetadata", function(){ tol = myVideo.duration;//獲取總時長 }); /p p //播放 function play(){ myVideo.play(); } /p p //暫停 function pause(){ myVideo.pause(); } /p p //播放時間點更新時 myVideo.addEventListener("timeupdate", function(){ var currentTime = myVideo.currentTime;//獲取當前播放時間 console.log(currentTime);//在調試器中打印 }); /p p //設置播放點 function playBySeconds(num){ myVideo.currentTime = num; } /p p //音量改變時 myVideo.addEventListener("volumechange", function(){ var volume = myVideo.volume;//獲取當前音量 console.log(volume);//在調試器中打印 }); /p p //設置音量 function setVol(num){ myVideo.volume = num; } /script /body /html
