Html5新增视频功能——video API 事件
video API事件
play() 可以控制視頻自動(dòng)播放
但是在chrome瀏覽器中不允許自動(dòng)播放，只有在設(shè)置靜音時(shí)才能允許自動(dòng)播放
理由是：視頻自動(dòng)播放在終端非常耗電，因此被禁止
不過(guò)chrome瀏覽器允許自動(dòng)播放7s以內(nèi)的視頻，然而很少有人會(huì)放7s以內(nèi)的視頻，而是直接用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();
//在谷歌瀏覽器中無(wú)法自動(dòng)播放，除非添加了事件
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");
//點(diǎn)擊控制播放與暫停
//id可以直接使用，不用DOM獲取
playNode.onclick=function(){
myVideo.play();
}
pauseNode.onclick=function(){
myVideo.pause();
}
//5秒后視頻自動(dòng)暫停
setTimeout(function(){
myVideo.pause();
},5000);
</script>
duration 視頻總長(zhǎng)度
在剛加載時(shí)無(wú)法顯示，結(jié)果是NaN
可以使用定時(shí)器解決，或者等到時(shí)視頻播放結(jié)束
<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("總時(shí)長(zhǎng)"+min+":"+sec);//總時(shí)長(zhǎng)3:26
},200);
</script>
currentTime 設(shè)置或返回視頻的當(dāng)前時(shí)間
<video src="data/imooc.mp4" controls id="myVideo"></video>
<div id="playNode">播放</div>
<div id="pauseNode">暫停</div>
<div id="gogogo">快進(jìn)</div>
<script>
var myVideo=document.getElementById("myVideo");
//每一秒獲取當(dāng)前視頻的播放時(shí)間
setInterval(function(){
console.log(myVideo.currentTime);
},1000);
//設(shè)置視頻的當(dāng)前位置是30秒處
myVideo.currentTime=30;
//點(diǎn)擊快進(jìn)，視頻跳到20秒之后
gogogo.onclick=function(){
myVideo.currentTime+=30;
}
</script>
src 設(shè)置視頻的src屬性（也可用于替換）
<video controls id="myVideo"></video>
<script>
myVideo.src="data/imooc.mp4";
</script>
volume 獲取和設(shè)置視頻音量
配合range使用效果很不錯(cuò)哦
<video controls id="myVideo"></video>
<input type="range" name="myvolumn" id="myvolumn" min=0 max=100 value="50">
<script>
myVideo.src="data/imooc.mp4";
//獲取視頻默認(rèn)音量（1代表最高）
console.log(myVideo.volume);//1
//設(shè)置視頻音量，0代表靜音
myVideo.volume=0;
//使用range來(lái)控制音量
myvolumn.oninput=function(){
myVideo.volume=myvolumn.value/100;
}
</script>
controls 設(shè)置視頻的控件
<video id="myVideo"></video>
<script>
myVideo.src="data/imooc.mp4";
//設(shè)置視頻控件
myVideo.controls=true;
</script>
muted 設(shè)置視頻靜音，但這個(gè)muted不會(huì)出現(xiàn)在video標(biāo)簽上
<video id="myVideo" src="data/imooc.mp4" controls></video>
<script>
//設(shè)置視頻靜音
myVideo.muted=true;
</script>
networkState 視頻的網(wǎng)絡(luò)狀態(tài)
0 未初始化
1 視頻已經(jīng)獲取到資源，未使用網(wǎng)絡(luò)
2 視頻正在加載（常見(jiàn)于網(wǎng)絡(luò)視頻），邊下載邊看
3 未找到視頻資源（常見(jiàn)src屬性錯(cuò)誤，或者剛初始化時(shí)，因?yàn)関ideo不會(huì)立刻找到資源，存在延遲）
<video id="myVideo" src="data/imooc.mp4" controls></video>
<script>
//獲取視頻的網(wǎng)路狀態(tài)
console.log(myVideo.networkState);//3
setTimeout(function(){
console.log(myVideo.networkState);//1
},200);
</script>
video API 事件2
currentSrc 返回當(dāng)前音視頻的地址
currentSrc和src的區(qū)別：
src 可以設(shè)置音視頻地址
currentSrc 不能設(shè)置音視頻地址，只能獲取（而且必須等到視頻資源已經(jīng)加載完可以使用的時(shí)候才能獲取到）
<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 返回視頻是否已經(jīng)播放結(jié)束
<video id="myVideo" src="data/imooc.mp4" controls></video>
<script>
//判斷視頻是否播放結(jié)束
console.log(myVideo.ended);//false
//監(jiān)聽(tīng)視頻播放結(jié)束事件
myVideo.addEventListener("ended",function(){
console.log("視頻播放結(jié)束");
//此時(shí)可以起到循環(huán)播放的作用
myVideo.play();
})
</script>
loop 設(shè)置或返回視頻的循環(huán)播放
<video id="myVideo" src="data/imooc.mp4" controls></video>
<div id="myloop">不循環(huán)</div>
<script>
//判斷視頻是否設(shè)置了循環(huán)播放
console.log(myVideo.loop);//false
//設(shè)置視頻循環(huán)播放
myVideo.loop=true;
//控制視頻的循環(huán)與否
myloop.onclick=function(){
if(myVideo.loop==false){
this.innerHTML="循環(huán)";
myVideo.loop=true;
}else{
this.innerHTML="不循環(huán)";
myVideo.loop=false;
}
}
</script>
playbackRate 設(shè)置或獲取視頻的播放速度
<video id="myVideo" src="data/imooc.mp4" controls></video>
<div id="rate">
<span>0.5</span>
<span>1</span>
<span>2</span>
</div>
<script>
//查看視頻的默認(rèn)播放速度
console.log(myVideo.playbackRate);//1
//設(shè)置視頻播放速度
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 視頻的當(dāng)前就緒狀態(tài)
0 沒(méi)有獲取到信息
1 有數(shù)據(jù)，但是快不足以支撐
2 當(dāng)前數(shù)據(jù)可用，但是下一幀不可用
3 數(shù)據(jù)正在緩沖，但當(dāng)前及下一幀是可用的
4 視頻已經(jīng)準(zhǔn)備就緒，數(shù)據(jù)足以播放
<video id="myVideo" src="data/imooc.mp4" controls></video>
<script>
//沒(méi)有獲取到信息
console.log(myVideo.readyState);//0
//視頻準(zhǔn)備就緒
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>
//監(jiān)聽(tīng)視頻播放狀態(tài)
myVideo.addEventListener("timeupdate",function(){
console.log("視頻正在播放中");
timeNode.innerHTML=myVideo.currentTime+"/"+myVideo.duration;
//let聲明變量，相當(dāng)于var，是es6語(yǔ)法
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>
這里有個(gè)小bug，就是秒數(shù)是個(gè)位數(shù)時(shí)，前面少了0，這個(gè)后面再處理
seeked 視頻已經(jīng)跳轉(zhuǎn)到新的時(shí)間位置
seeking 視頻正在跳轉(zhuǎn)到新的時(shí)間位置
監(jiān)聽(tīng)時(shí)需要加on onseeked onseeking
<video id="myVideo" src="data/imooc.mp4" controls></video>
<script>
//監(jiān)聽(tīng)視頻跳轉(zhuǎn)狀態(tài)
myVideo.onseeked=function(){
console.log("跳轉(zhuǎn)完成");
}
myVideo.onseeking=function(){
console.log("正在跳轉(zhuǎn)");
}
</script>
volumechange 音量改變事件
使用時(shí)需要加上on
<video id="myVideo" src="data/imooc.mp4" controls></video>
<p id="myvolume">音量改變</p>
<script>
//監(jiān)聽(tīng)音量改變事件
myVideo.onvolumechange=function(){
console.log("音量改變");
}
//點(diǎn)擊隨機(jī)改變音量
myvolume.onclick=function(){
myVideo.volume=Math.random();
}
</script>
video API 事件3
requestFullscreen 全屏
首先必須是在事件中觸發(fā)才能使用
其次不同瀏覽器有不同的寫法
chrome: webkitRequestFullscreen
火狐：mozRequestFullScreen
IE：ms
退出全屏沒(méi)有設(shè)置，默認(rèn)會(huì)使用自帶的控件（因?yàn)榧词箾](méi)有control控件，在全屏狀態(tài)下默認(rèn)也會(huì)出現(xiàn)控件）
<video id="myVideo" src="data/imooc.mp4" controls></video>
<p id="fullScreen">全屏</p>
<script>
//設(shè)置全屏
fullScreen.onclick=function(){
if(myVideo.webkitRequestFullscreen){
myVideo.webkitRequestFullscreen();
}else if(myVideo.mozRequestFullScreen){
myVideo.mozRequestFullScreen();
}else{
//其他瀏覽器待補(bǔ)充……
}
}
</script>
load 重新加載視頻資源
注意只是重新加載視頻資源，整個(gè)頁(yè)面并不會(huì)刷新
通常用于改變視頻的src之后的操作
<video id="myVideo" src="data/imooc.mp4" controls></video>
<p id="load">視頻刷新</p>
<script>
//設(shè)置全屏
load.onclick=function(){
myVideo.load();
}
</script>
canplay 視頻已經(jīng)準(zhǔn)備好，可以開(kāi)始播放
<video id="myVideo" src="data/imooc.mp4" controls></video>
<script>
myVideo.addEventListener("canplay",function(){
console.log("視頻已經(jīng)加載好，可以開(kāi)始播放了");
})
</script>
總結(jié)
以上是生活随笔為你收集整理的Html5新增视频功能——video API 事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 申请免费通配符证书(Let's
- 下一篇： 浦发美运新贵白金卡VS浦发AE白，哪款白