HTML5的video事件簡單介紹
本章節通過簡短的程式碼介紹一下html5中常用的幾個video事件。非常的簡單,需要的朋友可以簡單做一下參考。
一.獲取視訊時間長度:
當視訊載入以後,可以使用onloadedmetadata事件獲取視訊的長度。
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼video.onloadedmetadata=function(){ var vLength=video.duration; console.log(vLength); }
二.獲取視訊的播放進度:
當視訊開始播放之後,可以使用ontimeupdate事件獲取當前視訊的播放進度,當video物件的currentTime屬性發生改變時觸發ontimeupdate事件。currentTime屬性是浮點小數,可取到12位數的小數位數,程式碼如下:
[JavaScript] 純文字檢視 複製程式碼video.ontimeupdate=function(){ var vTime=video.currentTime; console.log(vTime); };
相關文章
- 簡單介紹HTML5 LandmarkHTML
- onerror事件用法簡單介紹Error事件
- invalid事件簡單介紹事件
- onreadystatechange事件簡單介紹事件
- form表單的onSubmit事件簡單介紹ORMMIT事件
- java關於事件的簡單介紹Java事件
- jQuery阻止事件冒泡簡單介紹jQuery事件
- jQuery自定義事件簡單介紹jQuery事件
- Query鍵盤事件簡單介紹事件
- jQuery滑鼠雙擊事件簡單介紹jQuery事件
- window.onunload事件簡單介紹事件
- js事件委託原理簡單介紹JS事件
- jquery自定義事件的使用方式簡單介紹jQuery事件
- HTML5 autofocus屬性用法簡單介紹HTML
- html5幾個簡單語法規則簡單介紹HTML
- js dom元素事件處理簡單介紹JS事件
- jQuery事件名稱空間簡單介紹jQuery事件
- javascript事件控制程式碼簡單介紹JavaScript事件
- 滑鼠右鍵點選事件簡單介紹事件
- HTML5 download屬性用法簡單介紹HTML
- HTML5獲取圖片的原始高度簡單介紹HTML
- javascript什麼是事件委託簡單介紹JavaScript事件
- jquery事件物件event常用屬性簡單介紹jQuery事件物件
- Webpack 的簡單介紹Web
- Promise的簡單介紹Promise
- CFRunloopObserverRef 的簡單介紹OOPServer
- html5標籤的data-*屬性用法簡單介紹HTML
- javascript事件處理函式繫結簡單介紹JavaScript事件函式
- 簡單介紹Angular單元測試之事件觸發的實現Angular事件
- SVG簡單介紹SVG
- HTML簡單介紹HTML
- ActiveMQ簡單介紹MQ
- HTML 簡單介紹HTML
- JavaScript 簡單介紹JavaScript
- CSS 簡單介紹CSS
- SCSS 簡單介紹CSS
- UICollectionView 簡單介紹UIView
- css簡單介紹CSS