when recat-video hls.js develops a video playback page, m3u8 is loaded,
the video is replayed after updating the resource, but the longer video will play the previous video for a period of time before switching to the new video

HLSSource

    import React, { Component } from "react";
import Hls from "hls.js";

export default class HLSSource extends Component {
  constructor(props, context) {
    super(props, context);
    this.hls = new Hls();
  }

  componentDidMount() {
    // this.setHls()
  }
  componentWillReceiveProps() {
    
  }
  setHls = () => {
    console.log(this.hls)
    const { src, video } = this.props
    if (Hls.isSupported()) {
      this.hls.loadSource(src);
      this.hls.attachMedia(video);
    }
  }
  play = () => {
    const { video } = this.props
    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play();
    });
  }
  destroy = () => {
    if (this.hls) {
      this.hls.destroy()
    }
  }
  componentWillUnmount() {
    // destroy hls video source
    if (this.hls) {
      this.hls.destroy()
    }
  }

  render() {
    return (
      <source
        src={this.props.src}
        preload="none"
        type={this.props.type || "application/x-mpegURL"}
      />
    );
  }
}

Player

  change = (lesson) => {
    
        const Player = this.refs.player
        this.setState({
            courseUrl: url
        }, () => {
            this.refs.hlsSource.setHls()
            // resource 
            this.refs.hlsSource.play() 
            // Player.load() 
        })
    }
    render ){
    return(
    <Player
            ref="player"
            playsInline
            autoPlay={false}
            className="video-play"
            startTime={this.state.startTime}>
            <HLSSource
                isVideoChild
                ref="hlsSource"
                src={this.state.courseUrl} />
        </Player>
        )}