javascript - 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 属性。

The ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed. The returned TimeRanges object is normalized.

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'
);