I'm at a loss for why this is happening and am failing to come up with an effective, non-hacky solution. I have a ReactJs Video component that features a simple implementation of a videojs player. I'm using it to play mpeg-dash files. For some reason, no matter what I set for preload (either on the html5 element or as options for the player), all of the players are downloading the video files all at once. This is severely affecting performance since they are HD videos and amount to over 250Mb. Here is the init method that I run when mounting the component:
initVideoPlayer() {
const { videoPath, videoFileName, mobileVideoFileName } = this.props;
if (this.videoNode) {
let mimeType;
let fullVideoPath;
let isIOS;
if (isIOS) {
fullVideoPath = `${videoPath}/${mobileVideoFileName}.m3u8`;
mimeType = 'application/x-mpegURL';
} else {
fullVideoPath = `${videoPath}/${videoFileName}.mpd`;
mimeType = 'application/dash+xml';
}
console.log(fullVideoPath);
this.state.videoJsOptions = {
autoplay: false,
controls: false,
preload: 'none',
sources: [
{
mimeType,
src:fullVideoPath,
},
],
};
this.videoJsPlayer = videojs(this.videoNode, this.state.videoJsOptions);
}
}
And the html element
if (videoFileName) {
return (
<div data-vjs-player>
<video
className="video-js"
key="desktop"
ref={(node) => {
this.videoNode = node;
}}
muted={this.state.isVideoMuted}
playsInline
poster={poster}
// preload="metadata"
/>
</div>
);
}
Has anyone experienced this problem before?