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