React video.js achieve m3u8 format video playback and real-time switch

Install:

npm install --save video.js

 

Importing

import videojs from 'video.js'

 

import "video.js/dist/video-js.css";

 

  constructor(props) {

        super(props);

        this.state = {

            current_url : '/001.m3u8',

        }

        this.player= null

    }

 

 

Under componentDidMount method

 this.player = videojs("video");

 this.player.controls(true)

 this.player.src(this.state.current_url)

 

<video id="video" className="video-js vjs-default-skin video" style={{height:"500px"}} ></video>