I am using video.js npm library for my next.js project. My video.js component is given below and it will be having the videos in m3u8 formats.
on my localhost, it sometimes shows the video, sometimes doesn't show. It loads at first the control bar and big play btn is displayed, but then in a second, it disappears and gives the error as
The media could not be loaded, either because the server or network failed or because the format is not supported.
I am using the latest version already for video.js which has VHS support and HLS support. version is "^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>
);
The problem was with back-end. back-end needs to add CORS settings to make it work.