Video.js 无法在最新版本上播放 m3u8 视频

Question

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

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

The media could not be loaded, either because the server or network failed or because the format is not supported.

我正在使用 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>
);

Answer 1

问题出在 back-end。 back-end 需要添加 CORS 设置才能使其正常工作。

Video.js 无法在最新版本上播放 m3u8 视频

Video.js not playing m3u8 video on latest version

http-live-streaming

html5-video

video.js

m3u8

next.js