javascript - 显示时间范围对象中最后添加的元素(HTML5 视频相关)

Question

HTML5 中有一个函数可以显示视频中缓冲时间范围的范围。我想显示最后添加的“缓冲”部分，但这被证明是相当困难的。

基本上，当您点击视频中的某个时间(比如说 00:16)时，如果视频还没有缓冲，它就会开始缓冲。所以我们最终得到一个像 16s-18s，然后是 16s-20s 等视频加载的缓冲区。现在假设我们在视频中没有缓冲的地方之前点击了其他地方。所以我点击 00:05。 “缓冲”数组将有 16-20s 和 5s-6s 或无论加载多少。

但是，5s-6s 将被添加到时间范围数组中的 16s-20s 之前。这意味着我们不能只选择数组的最后一个元素作为最新的缓冲部分，而是必须选择第一个元素。然后，如果您在 5s 标记之前单击其他地方，您最终会得到数组的第一部分不同的值。由于它们是以这种方式添加的，所以我找不到添加的最新缓冲区。

找到它的最佳方法是什么？

Answer 1

最简单的方法是在每次向缓冲区中添加新内容时，在 buffer 属性中复制 TimeRanges 对象。然后，您可以使用此“历史记录”来查找添加时间范围的顺序。

例如，使用 jQuery:

var history = [];
$(yourvideo).on("seeked",function(){
    history.push(jQuery.extend({}, this.buffered));
});