HTML5 video 事件應(yīng)用示例
發(fā)布時(shí)間：2014-09-11 15:17:36 作者：佚名 
我要評(píng)論
我要評(píng)論使用 onloadedmetadata 事件獲取視頻的時(shí)間長(zhǎng)度，使用 ontimeupdate 事件獲取視頻當(dāng)前播放的進(jìn)度，示例代碼如下
1、獲取視頻時(shí)間長(zhǎng)度
當(dāng)視頻載入video后，使用 onloadedmetadata 事件獲取視頻的時(shí)間長(zhǎng)度。
video.onloadedmetadata = function () {
var vLength = video.duration;
console.log(vLength);
}
2、當(dāng)前視頻的播放進(jìn)度
當(dāng)視頻開始播放時(shí)，可以使用 ontimeupdate 事件獲取視頻當(dāng)前播放的進(jìn)度。當(dāng)video對(duì)象的 currentTime 屬性發(fā)生改變時(shí)觸發(fā) ontimeupdate 事件。currentTime 屬性是浮點(diǎn)小數(shù)，可取到 12 位數(shù)的小數(shù)位數(shù)。
video.ontimeupdate = function () {
var vTime = video.currentTime;
console.log(vTime);
};
當(dāng)視頻載入video后，使用 onloadedmetadata 事件獲取視頻的時(shí)間長(zhǎng)度。
復(fù)制代碼
代碼如下:video.onloadedmetadata = function () {
var vLength = video.duration;
console.log(vLength);
}
2、當(dāng)前視頻的播放進(jìn)度
當(dāng)視頻開始播放時(shí)，可以使用 ontimeupdate 事件獲取視頻當(dāng)前播放的進(jìn)度。當(dāng)video對(duì)象的 currentTime 屬性發(fā)生改變時(shí)觸發(fā) ontimeupdate 事件。currentTime 屬性是浮點(diǎn)小數(shù)，可取到 12 位數(shù)的小數(shù)位數(shù)。
復(fù)制代碼
代碼如下:video.ontimeupdate = function () {
var vTime = video.currentTime;
console.log(vTime);
};
相關(guān)文章
HTML5 video 上傳預(yù)覽圖片視頻如何設(shè)置、預(yù)覽視頻某秒的海報(bào)幀
這篇文章主要介紹了HTML5 video 上傳預(yù)覽圖片視頻如何設(shè)置、預(yù)覽視頻某秒的海報(bào)幀問(wèn)題,需要的朋友可以參考下2018-08-28- 這篇文章主要介紹了HTML5 video視頻字幕的使用和制作,HTML5允許我們使用元素為視頻指定字幕，需要的朋友可以參考下2018-05-03
- 這篇文章主要介紹了淺談html5 video 移動(dòng)端填坑記,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-15
HTML5的Video標(biāo)簽有部分MP4無(wú)法播放的問(wèn)題解析（多圖）
這篇文章主要介紹了HTML5的Video標(biāo)簽有部分MP4無(wú)法播放的問(wèn)題。通過(guò)代碼展示了設(shè)置的過(guò)程，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-18解決html5中video標(biāo)簽無(wú)法播放mp4問(wèn)題的辦法
這篇文章主要給大家介紹了關(guān)于解決html5中video標(biāo)簽無(wú)法播放mp4問(wèn)題的辦法，文中介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)2017-05-07HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
使用HTML5時(shí)就應(yīng)該考慮包括桌面以及移動(dòng)端的瀏覽器兼容問(wèn)題,特別是視頻方面瀏覽器對(duì)解碼的支持會(huì)有所不同,所以下面就來(lái)分享一個(gè)HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分2016-05-19使用HTML5在網(wǎng)頁(yè)中嵌入音頻和視頻播放的基本方法
這篇文章主要介紹了使用HTML5在網(wǎng)頁(yè)中嵌入音頻和視頻播放的基本方法,2016-02-22HTML5 video播放器全屏(fullScreen)方法實(shí)例
這篇文章主要介紹了HTML5 video播放器全屏(fullScreen)方法實(shí)例,本文直接給出一個(gè)完整代碼實(shí)例,需要的朋友可以參考下2015-04-24HTML5 Video標(biāo)簽的屬性、方法和事件匯總介紹
這篇文章主要介紹了HTML5 Video標(biāo)簽的屬性、方法和事件匯總介紹,本文講解了2015-04-24- HTML video 適用于HTML 5+，用于定義在線觀看的視頻流媒體，這里簡(jiǎn)單介紹下， 方便需要的朋友2014-02-03
