Safari浏览器中HTML5 video的canplay事件未触发问题求助

嘿，我之前也踩过Safari原生HLS播放时canplay事件不触发的坑，给你几个针对性的排查和解决思路：

• 先确认HLS流的合规性
  Safari对原生HLS的规范要求很严格，你的music.m3u8必须完全符合Apple的HLS标准。比如：

  • 音频编码优先用AAC（MP3在Safari原生HLS里支持有限）
  • 分片格式建议用MPEG-TS（fMP4也支持，但部分旧版本Safari可能存在兼容问题）
  • 可以用苹果官方的媒体流验证工具检查m3u8文件，看看是否缺失EXT-X-VERSION、EXT-X-TARGETDURATION这类关键标签，或者分片地址是否有效。

• 替换/补充监听更可靠的事件
  Safari的原生HLS实现中，canplay事件的触发时机有时候会延迟或者不触发，反而loadedmetadata（元数据加载完成时）或者loadeddata（第一帧数据加载完成时）的触发更稳定。建议同时监听多个事件来覆盖不同场景：

  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // 开启元数据预加载，帮助浏览器提前获取媒体信息
    video.preload = 'metadata';
    video.src = 'music.m3u8';
  
    // 统一处理就绪事件
    const onMediaReady = () => {
      startPlay();
      // 移除监听避免重复执行
      video.removeEventListener('loadedmetadata', onMediaReady);
      video.removeEventListener('canplay', onMediaReady);
    };
  
    // 同时监听两个事件，提升兼容性
    video.addEventListener('loadedmetadata', onMediaReady);
    video.addEventListener('canplay', onMediaReady);
  
    // 增加错误监听，方便排查流加载问题
    video.addEventListener('error', (e) => {
      console.error('Safari HLS加载错误:', e.target.error.code);
    });
  }
  

• 检查预加载和跨域配置

  • 如果你的video元素preload属性设为none，Safari不会主动加载媒体数据，自然不会触发canplay。改成preload="metadata"或preload="auto"试试。
  • 如果HLS流放在不同域名下，必须确保服务器配置了正确的CORS响应头（比如Access-Control-Allow-Origin），否则Safari会静默拒绝加载，也不会触发任何就绪事件。

• 注意iOS Safari的播放限制
  iOS Safari要求媒体播放必须由用户交互触发（比如点击、触摸事件），如果你的startPlay是自动执行的，可能会被浏览器阻止。确保startPlay是绑定在用户手势事件内调用的。

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