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