HTML5視頻 - 文件加載完成事件？

Question

我需要檢測視頻文件何時完成加載。我想我應該使用進度 - >緩衝區，但在我的腦海裏，我記得讀到這是不可靠的。有沒有更好的方法，還是這是安全的？

請注意，我將保留一個localStorage緩存中的每個用戶完全下載的視頻，所以我會事先知道一個視頻是否已經加載，並且可能會繞過進度 - >緩衝區，如果這是一個堅持點。

在此先感謝。

Answer 1

你可以綁定「緩衝」事件，但是（在Chrome中至少）這個工作正常，但它不會調用最後一個「緩衝」事件（即它會檢測到90％... 94％... 98％..但不會100％）。

注：最近的jQuery的版本應該使用.prop（），而不是.attr（）

爲了解決這個問題，我使用的setInterval（）來檢查緩衝區每500ms（其中$ html5Video是您的<video>元素：

var videoDuration = $html5Video.attr('duration'); 

var updateProgressBar = function(){ 
    if ($html5Video.attr('readyState')) { 
     var buffered = $html5Video.attr("buffered").end(0); 
     var percent = 100 * buffered/videoDuration; 

     //Your code here 

     //If finished buffering buffering quit calling it 
     if (buffered >= videoDuration) { 
       clearInterval(this.watchBuffer); 
     } 
    } 
}; 
var watchBuffer = setInterval(updateProgressBar, 500); 

Answer 2

我有同樣的問題，並使用附加到進度事件的計時器。這是一個黑客，但我還沒有看到任何其他方式做到這一點。 （我已經在Chome 10 - Windows上測試過了）。

var video = document.getElementById('#example-video-element'); 
var timer = 0; 
video.addEventListener('progress', function (e) { 
    if (this.buffered.length > 0) { 

     if (timer != 0) { 
      clearTimeout(timer); 
     } 

     timer = setTimeout(function() {    
      if(parseInt(video.buffered.end()/video.duration * 100) == 100) { 
       // video has loaded.... 
      };   
     }, 1500); 

    } 
}, false); 

這看起來像你所想的錄取辦法的類型，但想我會發佈一個例子對於那些誰可能會尋找一個快速的代碼示例= P匿名用戶
GJ