VideoJs player ignoring preload

Viewed 1083

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?

1 Answers

video.js' preload attribute expect to recieve string not boolean. Available options: 'auto', 'metadata', 'none'.

Related