调用MediaElement.buffered.start()报IndexSizeError的原因排查

嘿，这个问题我之前调试媒体播放逻辑时也踩过坑！你碰到的IndexSizeError本质上是调用start()/end()时传入的索引超出了当前已缓冲片段的数量范围，具体原因和修复方法我给你拆解下：

为什么会报错？ #

当你刚获取到video/audio元素就直接调用e.buffered.start(0)时，大概率这个媒体还没开始缓冲任何数据——这时候buffered是一个TimeRanges对象，但它的length属性是0。你试图访问索引0的片段，自然就触发了“索引超出允许范围”的错误。

看你的代码：

var mediaelement = function(e) { return e.buffered.start(0); } 
console.log(mediaelement(document.querySelector('video')));

这里完全没有检查当前是否存在已缓冲的片段，直接硬访问索引0，肯定会出问题。

正确的解决方法 #

1. 先检查缓冲片段的数量再访问 #

在调用start()/end()之前，必须先判断e.buffered.length > 0，确保有缓冲片段存在：

var getFirstBufferedStart = function(media) {
  // 先确认有缓冲数据
  if (media.buffered.length > 0) {
    return media.buffered.start(0);
  }
  // 没有缓冲时返回合理默认值，这里用null，你也可以改成0或者其他提示
  return null;
}
console.log(getFirstBufferedStart(document.querySelector('video')));

2. 监听progress事件，在缓冲开始后再获取数据 #

媒体元素的progress事件会在缓冲数据时触发，在这个回调里处理缓冲信息，能保证缓冲已经初始化完成：

const media = document.querySelector('video'); // 换成audio也完全兼容
media.addEventListener('progress', function() {
  if (this.buffered.length > 0) {
    console.log('第一个缓冲片段的起始时间：', this.buffered.start(0));
    // 如果只需要获取一次缓冲数据，这里可以移除事件监听避免重复触发
    this.removeEventListener('progress', arguments.callee);
  }
});

3. 处理多段缓冲的情况（可选） #

如果用户拖动过进度条，buffered可能包含多个不连续的片段，你可以遍历所有片段获取完整的缓冲信息：

const logAllBufferedRanges = function(media) {
  for (let i = 0; i < media.buffered.length; i++) {
    console.log(`缓冲片段${i}：起始时间${media.buffered.start(i)}，结束时间${media.buffered.end(i)}`);
  }
}

内容的提问来源于stack exchange，提问作者user6247920