HLS直播流在Safari能播，Chrome却黑屏是怎么回事？

端木赛赛提问于 2026-03-27 22:32:20 阅读 2

交互

我用 hls.js 播 HLS 直播流，在 Safari 上一切正常，但在 Chrome 里视频区域一直是黑屏，控制台也没报错。试过加 video.muted = true 和用户手势触发播放，还是不行。

我的初始化代码是这样的：

if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource('https://example.com/live.m3u8');
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play();
  });
}

我来解答赞 2 收藏

反馈

1 条解答

迷人的保霞 Lv1

看起来是自动播放策略的问题。Chrome对自动播放有更严格的限制，特别是涉及音频的视频。

首先在初始化时加上 hls.startLoad()，确保流能开始加载。然后在 MANIFEST_PARSED 事件里，先检查视频是否被静音了再调用 play。

可以试试这个修改后的代码：

if (Hls.isSupported()) {

  const hls = new Hls();

  hls.loadSource('https://example.com/live.m3u8');

  hls.attachMedia(video);

  hls.on(Hls.Events.MANIFEST_PARSED, () => {

    if (video.muted || video.volume === 0) {

      video.play().catch(error => console.error('play failed', error));

    }

  });

  hls.startLoad();

}

官方文档里提到，处理跨浏览器兼容性时要特别注意用户的交互状态和自动播放策略。如果还是不行，考虑在用户点击页面任意位置后再触发播放。

这问题真挺烦人的，每个浏览器都有自己的脾气，调试起来耗时间。希望这能帮你解决问题。

2026-03-27 23:00