HTML5 视频 - 如何检测视频的特定部分何时加载

Question

我正在使用 HTML5 加载视频，并像这样观看进度事件：

var progressEventHandler=function(e){

};
var cn,domTarget='#vid';
cn=$(domTarget);
cn[0].addEventListener('progress',progressEventHandler,false);

我只想播放此视频的一部分。我想知道那部分什么时候满载。我不想知道整个视频何时加载，只是这一部分。

我的问题是这样的：

有没有什么方法可以使用进度事件来确定何时加载了一定数量的视频？

假设加载的文件的 50% 相当于能够播放视频的前半部分，我是否正确？

TIA

Answer 1

使用HTMLMediaElement 的buffered 属性。

浏览器缓冲的媒体源范围（如果有） 在访问缓冲属性的那一刻。 返回的TimeRanges 对象被规范化。

source

显示用法的简单示例：

var video = document.querySelector('video');
...
// Attach this to any event. Note that only first range is printed.
var buffered = video.buffered;
console.log(
  'The browser has buffered: ' + buffered.start(0) + ' - ' + buffered.end(0) + ' sec'
);