使用Video.js + videojs-contrib-hls如何限制TS文件加载失败后的重试次数

我之前也碰到过类似的问题，折腾了好一阵才搞明白该怎么正确监听事件来限制重试次数。你需要监听的是播放器tech对象上hls实例的hls-error事件，而不是播放器本身的通用error事件——因为videojs-contrib-hls的HLS相关错误（包括TS文件加载失败）是通过这个专属事件抛出的。

具体实现步骤： #

1. 先获取播放器的HLS实例：

const player = videojs('your-video-element-id');
const hls = player.tech().hls;

2. 定义变量统计重试次数，然后监听hls-error事件：

let retryCount = 0;
const maxRetryTimes = 3; // 你想要设置的最大重试次数

hls.on('hls-error', (event, data) => {
  // 精准匹配TS文件加载404的场景
  if (data.type === 'networkError' && data.responseCode === 404) {
    retryCount++;
    console.log(`TS文件加载失败，已重试${retryCount}次`);
    
    // 达到最大重试次数时，阻止默认重试行为
    if (retryCount >= maxRetryTimes) {
      event.preventDefault();
      // 这里可以添加自定义错误处理，比如给用户显示提示
      player.error({
        message: '视频加载失败，请稍后重试'
      });
    }
  }
});

补充说明： #

• hls-error事件会传递event和data两个参数，data里包含了错误的详细信息：比如type标记错误类型、responseCode对应HTTP状态码、url是出错的TS文件地址等，方便你精准判断场景。
• 调用event.preventDefault()可以直接终止Video.js默认的无限重试逻辑，避免不必要的网络请求。
• 如果需要监听所有HLS相关错误，去掉data.responseCode === 404的判断即可，根据实际需求调整过滤条件。

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