video.js v8.5.3在Firefox中无法播放HLS流的问题排查

问题场景 #

使用Video.js v8.5.3播放HLS流的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Player</title>
  <link href="./assets/css/video-js.css" rel="stylesheet" />
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="900"
    height="450"
    poster="./assets/imgs/mp_logo.png"
    data-setup="{}"
  >
    <source src="http://127.0.0.1:8632/live/v1/index.m3u8" type="application/x-mpegURL" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="./assets/js/video.js"></script>
</body>

</html>

该流在Chrome中可正常播放，但Firefox中出现错误：

VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) Playback cannot continue. No available working or supported playlists.

原因分析 #

• Firefox无原生HLS支持：Chrome浏览器原生支持HLS流播放，而Firefox本身不提供原生HLS解码能力，必须依赖第三方插件实现。
• Video.js v8.x默认未内置HLS插件：Video.js从v8版本开始，不再默认包含videojs-http-streaming（VHS）这类HLS播放插件，仅引入核心Video.js库无法在Firefox中解码HLS流。
• 编码格式兼容性问题：如果你的HLS流使用了Firefox不支持的编码格式（比如视频用非H.264编码、音频用非AAC编码），会导致解码失败。
• 跨域限制：若页面所在域名与HLS流的域名不一致，且未配置正确的CORS响应头，Firefox会因跨域安全限制拒绝加载流资源。

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