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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/10989.html
標籤：HTML5