video API事件
play() 可以控制視頻自動播放
但是在chrome瀏覽器中不允許自動播放，只有在設置靜音時才能允許自動播放
理由是：視頻自動播放在終端非常耗電，因此被禁止
不過chrome瀏覽器允許自動播放7s以內的視頻，然而很少有人會放7s以內的視頻，而是直接用gif
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>video</title> </head> <body> <video src="data/imooc.mp4" controls id="myVideo"></video> <script> var myVideo=document.getElementById("myVideo"); myVideo.play(); //在谷歌瀏覽器中無法自動播放，除非添加了事件 window.onclick=function(){ myVideo.play(); } </script> </body> </html>
pause() 視頻暫停
<video src="data/imooc.mp4" controls id="myVideo"></video> <div id="playNode">播放</div> <div id="pauseNode">暫停</div> <script> var myVideo=document.getElementById("myVideo"); //點擊控制播放與暫停 //id可以直接使用，不用DOM獲取 playNode.onclick=function(){ myVideo.play(); } pauseNode.onclick=function(){ myVideo.pause(); } //5秒后視頻自動暫停 setTimeout(function(){ myVideo.pause(); },5000); </script>
duration 視頻總長度
在剛加載時無法顯示，結果是NaN
可以使用定時器解決，或者等到時視頻播放結束
<video src="data/imooc.mp4" controls id="myVideo"></video> <div id="playNode">播放</div> <div id="pauseNode">暫停</div> <script> var myVideo=document.getElementById("myVideo"); console.log(myVideo.duration);//NaN setTimeout(function(){ console.log(myVideo.duration);//206.485333 var min=parseInt(myVideo.duration/60);//分 var sec=parseInt(myVideo.duration%60);//秒 console.log("總時長"+min+":"+sec);//總時長3:26 },200); </script>
currentTime 設置或返回視頻的當前時間
<video src="data/imooc.mp4" controls id="myVideo"></video> <div id="playNode">播放</div> <div id="pauseNode">暫停</div> <div id="gogogo">快進</div> <script> var myVideo=document.getElementById("myVideo"); //每一秒獲取當前視頻的播放時間 setInterval(function(){ console.log(myVideo.currentTime); },1000); //設置視頻的當前位置是30秒處 myVideo.currentTime=30; //點擊快進，視頻跳到20秒之后 gogogo.onclick=function(){ myVideo.currentTime+=30; } </script>
src 設置視頻的src屬性（也可用於替換）
<video controls id="myVideo"></video> <script> myVideo.src="data/imooc.mp4"; </script>
volume 獲取和設置視頻音量
配合range使用效果很不錯哦
<video controls id="myVideo"></video> <input type="range" name="myvolumn" id="myvolumn" min=0 max=100 value="50"> <script> myVideo.src="data/imooc.mp4"; //獲取視頻默認音量（1代表最高） console.log(myVideo.volume);//1 //設置視頻音量，0代表靜音 myVideo.volume=0; //使用range來控制音量 myvolumn.oninput=function(){ myVideo.volume=myvolumn.value/100; } </script>
controls 設置視頻的控件
<video id="myVideo"></video> <script> myVideo.src="data/imooc.mp4"; //設置視頻控件 myVideo.controls=true; </script>
muted 設置視頻靜音，但這個muted不會出現在video標簽上
<video id="myVideo" src="data/imooc.mp4" controls></video> <script> //設置視頻靜音 myVideo.muted=true; </script>
networkState 視頻的網絡狀態
0 未初始化
1 視頻已經獲取到資源，未使用網絡
2 視頻正在加載（常見於網絡視頻），邊下載邊看
3 未找到視頻資源（常見src屬性錯誤，或者剛初始化時，因為video不會立刻找到資源，存在延遲）
<video id="myVideo" src="data/imooc.mp4" controls></video> <script> //獲取視頻的網路狀態 console.log(myVideo.networkState);//3 setTimeout(function(){ console.log(myVideo.networkState);//1 },200); </script>
video API 事件2
currentSrc 返回當前音視頻的地址
currentSrc和src的區別：
src 可以設置音視頻地址
currentSrc 不能設置音視頻地址，只能獲取（而且必須等到視頻資源已經加載完可以使用的時候才能獲取到）
<video id="myVideo" src="data/imooc.mp4" controls></video> <script> console.log(myVideo.src);//file:///C:/Users/96579/Desktop/video/data/imooc.mp4 console.log(myVideo.currentSrc);//空 setTimeout(function(){ console.log(myVideo.src);//file:///C:/Users/96579/Desktop/video/data/imooc.mp4 console.log(myVideo.currentSrc);//file:///C:/Users/96579/Desktop/video/data/imooc.mp4 },200); </script>
ended 返回視頻是否已經播放結束
<video id="myVideo" src="data/imooc.mp4" controls></video> <script> //判斷視頻是否播放結束 console.log(myVideo.ended);//false //監聽視頻播放結束事件 myVideo.addEventListener("ended",function(){ console.log("視頻播放結束"); //此時可以起到循環播放的作用 myVideo.play(); }) </script>
loop 設置或返回視頻的循環播放
<video id="myVideo" src="data/imooc.mp4" controls></video> <div id="myloop">不循環</div> <script> //判斷視頻是否設置了循環播放 console.log(myVideo.loop);//false //設置視頻循環播放 myVideo.loop=true; //控制視頻的循環與否 myloop.onclick=function(){ if(myVideo.loop==false){ this.innerHTML="循環"; myVideo.loop=true; }else{ this.innerHTML="不循環"; myVideo.loop=false; } } </script>
playbackRate 設置或獲取視頻的播放速度
<video id="myVideo" src="data/imooc.mp4" controls></video> <div id="rate"> <span>0.5</span> <span>1</span> <span>2</span> </div> <script> //查看視頻的默認播放速度 console.log(myVideo.playbackRate);//1 //設置視頻播放速度 myVideo.playbackRate=1.5; //控制視頻的播放速度 rate.children[0].onclick=function(){ myVideo.playbackRate=0.5; } rate.children[1].onclick=function(){ myVideo.playbackRate=1; } rate.children[2].onclick=function(){ myVideo.playbackRate=2; } </script>
readyState 視頻的當前就緒狀態
0 沒有獲取到信息
1 有數據，但是快不足以支撐
2 當前數據可用，但是下一幀不可用
3 數據正在緩沖，但當前及下一幀是可用的
4 視頻已經准備就緒，數據足以播放
<video id="myVideo" src="data/imooc.mp4" controls></video> <script> //沒有獲取到信息 console.log(myVideo.readyState);//0 //視頻准備就緒 setTimeout(function(){ console.log(myVideo.readyState);//4 },200); </script>
timeupdate 視頻播放位置在改變
<video id="myVideo" src="data/imooc.mp4" controls></video> <p id="timeNode"></p> <p id="timeNode2"></p> <script> //監聽視頻播放狀態 myVideo.addEventListener("timeupdate",function(){ console.log("視頻正在播放中"); timeNode.innerHTML=myVideo.currentTime+"/"+myVideo.duration; //let聲明變量，相當於var，是es6語法 let now=parseInt(myVideo.currentTime/60)+":"+parseInt(myVideo.currentTime%60); let all=parseInt(myVideo.duration/60)+":"+parseInt(myVideo.duration%60); timeNode2.innerHTML=now+"/"+all; }) </script>
這里有個小bug，就是秒數是個位數時，前面少了0，這個后面再處理
seeked 視頻已經跳轉到新的時間位置
seeking 視頻正在跳轉到新的時間位置
監聽時需要加on onseeked onseeking
<video id="myVideo" src="data/imooc.mp4" controls></video> <script> //監聽視頻跳轉狀態 myVideo.onseeked=function(){ console.log("跳轉完成"); } myVideo.onseeking=function(){ console.log("正在跳轉"); } </script>
volumechange 音量改變事件
使用時需要加上on
<video id="myVideo" src="data/imooc.mp4" controls></video> <p id="myvolume">音量改變</p> <script> //監聽音量改變事件 myVideo.onvolumechange=function(){ console.log("音量改變"); } //點擊隨機改變音量 myvolume.onclick=function(){ myVideo.volume=Math.random(); } </script>
video API 事件3
requestFullscreen 全屏
首先必須是在事件中觸發才能使用
其次不同瀏覽器有不同的寫法
chrome: webkitRequestFullscreen
火狐：mozRequestFullScreen
IE：ms
退出全屏沒有設置，默認會使用自帶的控件（因為即使沒有control控件，在全屏狀態下默認也會出現控件）
<video id="myVideo" src="data/imooc.mp4" controls></video> <p id="fullScreen">全屏</p> <script> //設置全屏 fullScreen.onclick=function(){ if(myVideo.webkitRequestFullscreen){ myVideo.webkitRequestFullscreen(); }else if(myVideo.mozRequestFullScreen){ myVideo.mozRequestFullScreen(); }else{ //其他瀏覽器待補充…… } } </script>
load 重新加載視頻資源
注意只是重新加載視頻資源，整個頁面並不會刷新
通常用於改變視頻的src之后的操作
<video id="myVideo" src="data/imooc.mp4" controls></video> <p id="load">視頻刷新</p> <script> //設置全屏 load.onclick=function(){ myVideo.load(); } </script>
canplay 視頻已經准備好，可以開始播放
<video id="myVideo" src="data/imooc.mp4" controls></video> <script> myVideo.addEventListener("canplay",function(){ console.log("視頻已經加載好，可以開始播放了"); }) </script>