为什么HLS直播流在Safari能播，Chrome却黑屏？

东方素伟提问于 2026-03-11 04:32:23 阅读 8

交互

我在用 video.js 播 HLS 直播流，Safari 正常播放，但 Chrome 打开就黑屏没画面，控制台也没报错，这到底啥情况？

查了下说是 Chrome 不原生支持 HLS，得靠 Media Source Extensions（MSE），但我已经引入了 videojs-contrib-hls 插件啊。而且我还试过直接用原生 <video src="xxx.m3u8"></video>，结果一样不行。

顺便贴一下我给 video 标签加的样式，是不是这里影响了？

.live-video {
  width: 100%;
  height: auto;
  background: #000;
  object-fit: cover;
}

我来解答赞 5 收藏

反馈

1 条解答

迷人的芸菡 Lv1

这个问题，十有八九是CORS搞的鬼。

Chrome对跨域资源的检查比Safari严格得多。你那个m3u8文件和ts分片所在的服务器，必须正确返回CORS头：

Access-Control-Allow-Origin: *

Access-Control-Allow-Headers: Range

Access-Control-Expose-Headers: Content-Length, Content-Range

如果服务器是你可控的，在nginx上加一下就行。如果服务器你管不了，那就没辙了。

另外，video标签上得加crossorigin属性：

<video class="video-js vjs-default-skin" 

       controls 

       crossorigin="anonymous"

       data-setup='{"html5": {"nativeAudioTracks": false, "nativeVideoTracks": false}}'>

</video>

还有，videojs-contrib-hls这插件现在改名了叫videojs-http-streaming，建议升级到最新版。老版本有些已知bug会导致Chrome黑屏。

最后检查一下：页面是https的话，直播流地址也得是https，Chrome现在对混合内容卡得很死。

你先去控制台Network面板看看m3u8和ts文件能不能正常加载，如果看到Failed to load这种提示，基本就是CORS没配好。

2026-03-11 05:02