An example Video JS component in React, based on the Video JS docs

VideoPlayer.jsx

import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

// video.js player from the docs: https://github.com/videojs/video.js/blob/master/docs/guides/react.md

class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  componentWillReceiveProps(newProps) {
    // When a user moves from one title to the next, the VideoPlayer component will not be unmounted,
    // instead its properties will be updated with the details of the new video. In this case,
    // we can update the src of the existing player with the new video URL.
    if (this.player) {
      this.player.src({
        type: newProps.video.mime_type,
        src: newProps.video.video_url
      });
    } 
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  
  // use `ref` to give Video JS a reference to the video DOM element: https://reactjs.org/docs/refs-and-the-dom
  render() {
    return (
      <div data-vjs-player>
        <video ref={ node => this.videoNode = node } className="video-js"></video>
      </div>
    )
  }
}

export default VideoPlayer;

Can you share the full code with "videojs-hls-quality-selector"

I'm using almost the same code with a youtube video and just did not work, mp4 source seems fine but nto youtube link, any idea guys?

Have you added youtube.min.js video.js player(corejs) which plays links dynamically https://sahilkashyap64.github.io/hls/index5.html

Anybody looking for hook alternative to this code, check out the following snippet:

import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import videojs from 'video.js';

// eslint-disable-next-line import/prefer-default-export
const usePlayer = ({ src, controls, autoplay }) => {
  const options = {
    fill: true,
    fluid: true,
    preload: 'auto',
    html5: {
      hls: {
        enableLowInitialPlaylist: true,
        smoothQualityChange: true,
        overrideNative: true,
      },
    },
  };
  const videoRef = useRef(null);
  const [player, setPlayer] = useState(null);

  useEffect(() => {
    const vjsPlayer = videojs(videoRef.current, {
      ...options,
      controls,
      autoplay,
      sources: [src],
    });
    setPlayer(vjsPlayer);

    return () => {
      if (player !== null) {
        player.dispose();
      }
    };
  }, []);
  useEffect(() => {
    if (player !== null) {
      player.src({ src });
    }
  }, [src]);

  return videoRef;
};

const VideoPlayer = ({ src, controls, autoplay }) => {
  const playerRef = usePlayer({ src, controls, autoplay });

  return (
    <div data-vjs-player>
      <video ref={playerRef} className="video-js" />
    </div>
  );
};

VideoPlayer.propTypes = {
  src: PropTypes.string.isRequired,
  controls: PropTypes.bool,
  autoplay: PropTypes.bool,
};

VideoPlayer.defaultProps = {
  controls: true,
  autoplay: false,
};

export default VideoPlayer;

how do i add text tracks to this? thanks :)

How to add https://github.com/streamroot/videojs-hlsjs-plugin plugin in the above code.

The styling files is not getting imported by using hooks component mentioned above.

The solution was to add the css download in the head file

<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">

@char0n @vazbloke @xairoo
I am encountering a problem while trying to fallback from hls to mp4. I want to have my primary source as m3u8 and secondary as mp4. So if the player doesn't find m3u8 file I want it to fallback to the next src and start playing the mp4 one. But my player doesn't stop trying to fetch the m3u8 file even when it's not there.
I get this in my console VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.
I am replacing .mp4 with /master.m3u8 because that's where my m3u8 file will be in CDN.

I am trying this in React with video.js v7.8.4 and this is my code:

import React, { useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import videojs from "video.js";
import "video.js/dist/video-js.min.css";

const options = {
fill: true,
fluid: true,
responsive: true,
preload: "auto",
controls: true,
html5: {
  vhs: {
   enableLowInitialPlaylist: false,
    smoothQualityChange: true,
    overrideNative: true
  }
},
playbackRates: [0.25, 0.5],
sourceOrder: true
};

export default function VideoViewer(props) {
  const { src } = props;
  const classes = useStyles();
  const videoRef = useRef(null);
  const [player, setPlayer] = useState(null);

  useEffect(() => {
    const videoPlayer = videojs(videoRef.current, options);
    setPlayer(videoPlayer);

    return () => videoPlayer.dispose();
  }, []);

  useEffect(() => {
    if (player !== null) {
      player.src([
        {
          src: src.replace(".mp4", "/master.m3u8"),
          type: "application/x-mpegURL"
        },
        {
          src,
          type: "video/mp4"
        }
      ]);
    }
  }, [src, player]);

  return (
    <div data-vjs-player>
      <video ref={videoRef} className="video-js vjs-big-play-centered" />
    </div>
  );
}

VideoViewer.propTypes = {
  src: PropTypes.string.isRequired
};

I am pretty new to this so I might be making some mistake here, feel free to correct me if I missed anything or did something wrong.
Any kind of help is appreciated, thanks!

I am having a similar issue, did you succeed to dynamically change the src?

@geosigno not really sure how to fix this. It seems that this is comming directly from video.js and is not related with the React component I've provided.

More info about possible workarounds:

• videojs/video.js#5849
• iv-org/invidious#1794