hls.js如何加载视频全部分段/块（含当前时间前的分段）

问题说明 #

常规hls.js清晰度切换实现中，切档后默认仅从当前播放位置开始向后缓冲分片，不会主动加载当前时间点之前的未缓冲分片。在seek拖拽时切低清、拖拽完成切回高清的交互逻辑下，用户向后拖拽进度条时，前置未缓冲分片会触发实时加载，导致卡顿。
由于业务场景下视频时长短、单分片体积小，全量加载分片不会带来明显的性能损耗，可以通过以下两种方式实现强制全分片缓冲：

全分片加载完成后，任意进度位置拖拽都不会触发额外网络请求，交互流畅度和本地播放一致。

实现方案 #

方案1：初始化配置调整（推荐） #

初始化hls实例时修改默认缓冲配置，从根源放开分片加载范围限制：

const hlsInstance = new Hls({
  // 配置向前缓冲区最大长度，设置为大于视频总时长的值即可覆盖所有前置分片
  backBufferLength: 9999,
  // 配置向后缓冲区最大长度，覆盖全视频时长
  maxBufferLength: 9999,
  // 关闭分片懒加载，避免非可视区域分片不被加载
  lazyLoad: false,
  // 开启分片预加载
  startFragPrefetch: true
})

配置完成后，无论当前播放位置在什么时间点，hls.js都会自动补全加载前后所有未缓冲的分片，全分片加载完成后任意位置拖拽都不会触发加载卡顿。

方案2：切档后手动触发全分片加载 #

如果不想修改全局初始化配置，可以在切换到低清晰度档位后，监听切档完成事件，手动遍历当前档位的所有分片触发加载：

private setWorstQuality() {
  this.player.hls.currentLevel = 0
  // 监听档位切换完成事件
  this.player.hls.once(Hls.Events.LEVEL_SWITCHED, () => {
    const currentLevelInfo = this.player.hls.levels[this.player.hls.currentLevel]
    // 未拿到分片列表时直接返回
    if (!currentLevelInfo.details?.fragments) return
    // 遍历当前档位所有分片
    currentLevelInfo.details.fragments.forEach(fragment => {
      // 跳过已经加载完成的分片，避免重复请求
      if (fragment.loaded) return
      // 手动触发分片加载
      this.player.hls.trigger(Hls.Events.FRAG_LOAD, {
        frag: fragment,
        level: this.player.hls.currentLevel
      })
    })
  })
}

适配注意事项 #

• 该方案仅适用于短视频、单分片体积小的场景，长视频使用会大幅提升带宽消耗，拖慢初始加载速度
• hls.js 1.4及以上版本中，需额外关闭capLevelToPlayerSize配置，避免前置分片加载逻辑被分辨率适配规则拦截
• 手动触发分片加载后无需额外处理缓冲写入逻辑，hls.js会自动将加载完成的分片写入媒体缓冲区，拖拽时可直接读取本地缓存

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