react-video hls.js 播放m3u8视频时，切换有延迟

Question

recat-video hls.js开发视频播放页面时，加载m3u8,
切换视频更新resource后 重新播放了，但是时间较长的视频会播放之前的视频一段时间后才会切换到新的视频

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>
        )}

Answer 1

推荐一个播放器

dplayer(http://dplayer.js.org/#/)