httpライブストリーミングHLSでリアクションライフサイクルを処理する方法は？

Question

私はこのhls.js playerをリアクションと一緒にm3u8をストリームに使用しています。私はhls.jsプレーヤーを設定する一つのコンポーネントVideoPlayerを持っています。このコンポーネントには、isPlayingとisMutedのような2つの状態プロパティがあります。 onClickというカスタムボタンがあり、setStateにコンポーネントが呼び出されますが、これはコンポーネントとビデオストリームを再レンダリングして元の状態に戻り、最初のフレームに戻って停止します。一般的に、ストリーミングビデオでアプリケーション（還元）やローカル状態の変化をどのように扱いますか？私はreduxストアの更新やローカル状態の変更が行われるたびに、ビデオに常にこの "フリッカー"（再レンダリングされている）があることに気付きます。コード例WITH

UPDATE：

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; 

Answer 1

私はこの問題は、コンポーネントのライフサイクルだと思います。

playVideo - > SETSTATE - > componentUpdate - > componentDidUpdate - > initPlayer

ので、プレーヤーは、ユーザーがビデオを再生するたびに初期化されます。

"shouldComponentUpdate"を上書きすることで、プレイヤーを初期化せずに更新できないようにすることができます。

---