问如何处理http实时流HLS的生命周期？

EN

import React, {PropTypes} from 'react';
import Hls from 'hls.js';

class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isMuted: true,
      isPlaying: false,
      playerId : Date.now()
    };

    this.hls = null;
    this.playVideo = this.playVideo.bind(this);
  }

  componentDidMount() {
    this._initPlayer();
  }

  componentDidUpdate() {
    this._initPlayer();
  }

  componentWillUnmount() {
    if(this.hls) {
      this.hls.destroy();
    }
  }

  playVideo() {
    let { video : $video } = this.refs;
    $video.play();

    this.setState({isPlaying: true});
  }

  _initPlayer () {
    if(this.hls) {
      this.hls.destroy();
    }

    let { url, autoplay, hlsConfig } = this.props;
    let { video : $video } = this.refs;
    let hls = new Hls(hlsConfig);

    hls.attachMedia($video);

    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
      hls.loadSource(url);

      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        if(autoplay) {
          $video.play();
        }
        else {
          $video.pause();
        }
      });
    });

    this.hls = hls;
  }

  render() {
    let { isMuted, isPlaying, playerId } = this.state;
    let { controls, width, height } = this.props;

    return (
      <div key={playerId}>
        {!isPlaying &&
          <span onClick={this.playVideo}></span>
        }
        <video ref="video"
          id={`react-hls-${playerId}`}
          controls={controls}
          width={width}
          height={height}
          muted={isMuted}
          playsinline>
        </video>
      </div>
    );
  }
}

export default VideoPlayer;