npm install --save video.js videojs-contrib-hls

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

class VideoPlayer extends React.Component {
  componentDidMount() {
    // 在組件掛載后初始化視頻播放器
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('視頻播放器已準(zhǔn)備好');
    });
  }

  componentWillUnmount() {
    // 在組件卸載前銷毀視頻播放器
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div>
        <div data-vjs-player>
          <video ref={(node) => (this.videoNode = node)} className="video-js"></video>
        </div>
      </div>
    );
  }
}

export default VideoPlayer;

<VideoPlayer src="https://example.com/video.m3u8" />

<video height="100%" width="100%" controls>
      <source src={m3u8Url} type="application/x-mpegURL" />
</video>

npm install --save video.js

import React, { Component } from "react";
import Videojs from "video.js";
//import "videojs-contrib-hls";
import "video.js/dist/video-js.css";

class VideoPlayer extends Component {
  constructor(props) {
    super(props);
  }

  componentWillUnmount() {
    // 銷毀播放器
    if (this.player) {
      this.player.dispose();
    }
  }
  componentDidMount() {
    const { height, width, src } = this.props;
    this.player = Videojs(
      "custom-video",
      {
        height,
        width,
        bigPlayButton: true,
        textTrackDisplay: false,
        errorDisplay: false,
        controlBar: true,
        type: "application/x-mpegURL",
      },
      function () {
        this.play();
      }
    );
    this.player.src({ src });
  }

  render() {
    return (
      <video
        id="custom-video"
        className="video-js"
        controls
        preload="auto"
      ></video>
    );
  }
}

export default VideoPlayer;

<VideoPlayer src={m3u8url} width="250" />