·您當前的位置:主頁 > 技術教程 > 微信視頻 >

[html5]html5視頻標簽獲取并設置HTML5 Video的當前進度的代碼

時間:2017-12-29 15:03酷播
[html5]html5視頻標簽獲取并設置HTML5 Video的當前進度的代碼

HTML5視頻的Bigger體驗是非常令人振奮的,很簡單的道理,不用加載和依賴煩人的Flash或其他第三方插件來播放視頻,也是大功一件。我們可以通過自定義控件對視頻進行顯示和操控,其中一個常見的需求是顯示視頻的時長(duration)。下面我們一起來看看如何獲得并顯示視頻的持續時間!

JavaScript 代碼

video 元素有一個屬性(property)叫做 duration,表示的是視頻內容的時間長度,單位是秒。要比較好地顯示視頻的持續時間,我們需要使用到 parseInt 函數,以及取模運算(% , modulus ):

  1. //  假設"video" 是獲取的視頻節點對象 
  2. var i = setInterval(function() { 
  3.     // 這里注意, 必須判斷視頻的 readyState。 
  4.     // 因為有可能沒加載完,則獲取到的視頻時長信息是不正確的。 
  5.     if(video.readyState > 0) { 
  6.         // 計算,10進制,以及取模 
  7.         var minutes = parseInt(video.duration / 60, 10); 
  8.         var seconds = video.duration % 60; 
  9.  
  10.         // (此處可以添加代碼,將分鐘,秒數顯示到需要的地方) 
  11.         // ... 
  12.         // 執行到這里,就將循環定時器清除。 
  13.         clearInterval(i); 
  14.     } 
  15. }, 200); 
原文鏈接: Get HTML5 Video Duration

原文日期: 2015年03月10日

翻譯日期: 2015年03月14日

翻譯人員: 鐵錨 http://blog.csdn.net/renfufei 
來源 http://blog.csdn.net/renfufei/article/details/44260695
 

熱門文章推薦

請稍候...
北京快乐八开奖结果