HTML5 video 事件應(yīng)用示例
發(fā)布時(shí)間:2014-09-11 15:17:36 作者:佚名
我要評論

使用 onloadedmetadata 事件獲取視頻的時(shí)間長度,使用 ontimeupdate 事件獲取視頻當(dāng)前播放的進(jìn)度,示例代碼如下
1、獲取視頻時(shí)間長度
當(dāng)視頻載入video后,使用 onloadedmetadata 事件獲取視頻的時(shí)間長度。
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對象的 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í)間長度。
復(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對象的 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)幀問題,需要的朋友可以參考下2018-08-28- 這篇文章主要介紹了HTML5 video視頻字幕的使用和制作,HTML5允許我們使用元素為視頻指定字幕,需要的朋友可以參考下2018-05-03
- 這篇文章主要介紹了淺談html5 video 移動(dòng)端填坑記,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-15
HTML5的Video標(biāo)簽有部分MP4無法播放的問題解析(多圖)
這篇文章主要介紹了HTML5的Video標(biāo)簽有部分MP4無法播放的問題。通過代碼展示了設(shè)置的過程,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-18解決html5中video標(biāo)簽無法播放mp4問題的辦法
這篇文章主要給大家介紹了關(guān)于解決html5中video標(biāo)簽無法播放mp4問題的辦法,文中介紹的非常詳細(xì),相信會(huì)對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來2017-05-07HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
使用HTML5時(shí)就應(yīng)該考慮包括桌面以及移動(dòng)端的瀏覽器兼容問題,特別是視頻方面瀏覽器對解碼的支持會(huì)有所不同,所以下面就來分享一個(gè)HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分2016-05-19使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法
這篇文章主要介紹了使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法,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+,用于定義在線觀看的視頻流媒體,這里簡單介紹下, 方便需要的朋友2014-02-03