Video.js 不在最新版本上播放 m3u8 视频答案

【问题标题】：Video.js not playing m3u8 video on latest versionVideo.js 不在最新版本上播放 m3u8 视频
【发布时间】：2023-01-27 19:24:31
【问题描述】：

我正在为我的 next.js 项目使用 video.js npm 库。我的 video.js 组件在下面给出，它将以 m3u8 格式播放视频。

在我的本地主机上，它有时显示视频，有时不显示。它首先加载控制栏并显示 big play btn，但一秒钟后，它消失并给出错误

无法加载媒体，因为服务器或网络出现故障或者格式不受支持。

我正在为 video.js 使用最新版本，它具有 VHS 支持和 HLS 支持。版本是"^7.18.1"

return (
<div data-vjs-player>
  <video
    id={id}
    ref={videoRef}
    className="video-js vjs-default-skin vjs-big-play-centered"
    poster={poster}
    autoPlay={false}
  >
    <source src={src} type="video/mp4" />
    <source src={src} type="application/x-mpegURL" />
    <source src={src} type="video/webm" />
    <p className="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      {' '}
      <a href="http://videojs.com/html5-video-support/" target="_blank" rel="noreferrer">supports HTML5 video.</a>
    </p>
  </video>
</div>
);

【问题讨论】：

标签： next.js html5-video http-live-streaming video.js m3u8

【解决方案1】：

问题出在后端。后端需要添加 CORS 设置才能使其工作。

【讨论】：

【解决方案2】：

@NidhiDadiya 我如何添加 CORS 设置

【讨论】：