如何解决iPhone端Video.js的vhs.xhr.beforeRequest失效问题

1. 确保在Player就绪后再设置VHS钩子 #

iPhone WebKit内核的资源加载时序可能与其他设备不同，必须等待Player完全就绪后再获取VHS实例，否则钩子无法绑定成功：

player.ready(() => {
  const tech = player.tech({ IWillNotUseThisInPlugins: true });
  // 确认VHS实例已初始化
  if (tech.vhs) {
    tech.vhs.xhr.beforeRequest = (options) => {
      console.log('beforeRequest triggered');
      // 必须返回options，否则请求会中断
      return options;
    };
  }
});

注意：钩子函数必须返回options对象，否则会导致请求终止，进而触发解码错误。

2. 排查MEDIA_ERR_DECODE错误根源 #

该错误本质是媒体流与iPhone WebKit不兼容，优先排查流本身：

• 验证HLS流编码：确保视频为H.264 Baseline/Main Profile，音频为AAC-LC，这是iPhone WebKit兼容性最好的编码组合；
• 检查m3u8文件：避免包含过高分辨率（如超过4K）、帧率（如超过60fps）或不支持的加密方式（如非AES-128的加密）；
• 直接用Safari打开m3u8链接：如果Safari也无法播放，说明是流的问题，需调整编码或切片配置。

3. 强制禁用原生HLS，使用Video.js的HLS.js实现 #

iPhone上的Chrome/Firefox均使用Safari的WebKit内核，默认可能优先使用原生HLS播放，此时VHS的XHR钩子不会触发。需在Player初始化时强制启用HLS.js：

const player = videojs('my-player', {
  html5: {
    hls: {
      overrideNative: true,
      // 启用Worker提升兼容性
      enableWorker: true
    }
  }
});

注意：overrideNative必须在初始化时设置，后续修改不会生效。

4. 调试VHS初始化状态 #

在iPhone上添加调试日志，确认VHS实例是否正常加载：

player.ready(() => {
  const tech = player.tech({ IWillNotUseThisInPlugins: true });
  console.log('当前VHS实例:', tech.vhs);
  console.log('XHR钩子配置:', tech.vhs?.xhr);
});

如果tech.vhs为undefined，说明Player未使用VHS技术，需确认流格式是否为HLS，或Video.js版本是否支持VHS。

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