html 代碼：
video后邊幾個(gè)元素，可處理ios 系統(tǒng)的兼容性
<video id="myVideo" controls="controls" poster='預(yù)覽圖' preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="">
<source src="" type="video/mp4">
</video>js 代碼：
<script>
//獲取視頻DOM元素
var myVideo = document.getElementById("myVideo");
myVideo.oncanplay = function(){
console.log("準(zhǔn)備就緒");
};
//監(jiān)聽播放開始
myVideo.addEventListener('play',function(){
console.log("開始播放");
});
//監(jiān)聽播放結(jié)束
myVideo.addEventListener('pause',function(){
console.log("播放暫停");
});
//監(jiān)聽播放結(jié)束
myVideo.addEventListener('ended',function(){
console.log("播放結(jié)束");
});
//使用事件監(jiān)聽方式捕捉事件， 此事件可作為實(shí)時(shí)監(jiān)測(cè)video 播放狀態(tài)
myVideo.addEventListener("timeupdate",function(){
var timeDisplay;
//用秒數(shù)來顯示當(dāng)前播放進(jìn)度
timeDisplay = Math.floor(myVideo.currentTime);
console.log(Math.floor(myVideo.currentTime));
//當(dāng)視頻播放到 4s的時(shí)候做處理
if(timeDisplay == 4){
//處理代碼
}
},false);
</script>事件介紹
| 事件 | 描述 |
|---|---|
| loadstart | 瀏覽器開始在網(wǎng)上尋找媒體數(shù)據(jù) |
| progress | 瀏覽器正在獲取媒體數(shù)據(jù) |
| suspend | 瀏覽器暫停獲取媒體數(shù)據(jù)，但是下載過程并滑正常結(jié)束 |
| abort | 瀏覽器在下載完全部媒體數(shù)據(jù)之前中止獲取媒體數(shù)據(jù)，但是并不是由錯(cuò)誤引起的 |
| error | 獲取媒體數(shù)據(jù)過程中出錯(cuò) |
| emptied | video元素或audio元素所在網(wǎng)絡(luò)突然變?yōu)槲闯跏蓟癄顟B(tài)可能原因有兩個(gè):1.載入媒體過程中突然發(fā)生一個(gè)致命錯(cuò)誤 2.在瀏覽器正在選擇支持的播放格式時(shí)，又調(diào)用 了load方法重新載入媒體文章來源：http://www.zghlxwxcb.cn/news/detail-476608.html |
| stalled | 瀏覽器嘗試獲取媒體數(shù)據(jù)失敗 |
| play | 即將開始播放，當(dāng)執(zhí)行了play方法時(shí)觸發(fā)，或數(shù)據(jù)下載后元素被設(shè)為autoplay屬性 |
| pause | 播放暫停，當(dāng)執(zhí)行了pause方式時(shí)觸發(fā) |
| loadedmetadata | 瀏覽器獲取完畢媒體的時(shí)間長和字節(jié)數(shù) |
| waiting | 播放過程由于得不到下一幀而暫停播放（例如下一幀尚未加載完畢），但很快就能夠得到下一幀 |
| canplay | 瀏覽器能夠播放媒體，但估計(jì)以當(dāng)前的播放速率不能直接播放完畢，播放期間需要緩沖 |
| canplaythrough | 瀏覽器能夠播放媒體，而且以當(dāng)前播放速率能夠?qū)⒚襟w播放完畢，不再需要進(jìn)行緩沖 |
| seeking | seeking屬性變?yōu)閠rue，瀏覽器正在請(qǐng)求數(shù)據(jù) |
| seeked | seeking屬性變?yōu)閒alse，瀏覽器停止請(qǐng)求數(shù)據(jù) |
| timeupdate | 由于播放位置被改變，可能是播放過程中的自然改變，也可能是被人為的改變，或由于播放不能連續(xù)而發(fā)生的跳變 |
| ended | 播放結(jié)束后停止播放 |
| ratechange | defaultplaybackRate屬性（默認(rèn)播放速率）或playbackRate屬性（當(dāng)前播放速率）被改變 |
| druationchange | 播放時(shí)長被改變 |
| volumechange | volume屬性（音量）被改變或muted屬性（靜音狀態(tài)）被改變 |
轉(zhuǎn)自：HTML5中video元素事件詳解（實(shí)時(shí)監(jiān)測(cè)當(dāng)前播放時(shí)間） - 技術(shù)學(xué)習(xí) - 黑蜘蛛博客文章來源地址http://www.zghlxwxcb.cn/news/detail-476608.html
到了這里，關(guān)于HTML5中video元素事件詳解（實(shí)時(shí)監(jiān)測(cè)當(dāng)前播放時(shí)間）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
