처리 방법 HTTP 라이브 스트리밍 HLS를 사용하여 실제 수명주기를 처리 하시겠습니까?

Question

나는이 hls.js player을 React와 함께 m3u8을 사용하고 있습니다. hls.js 플레이어를 설정하는 하나의 구성 요소 VideoPlayer이 있습니다. 이 구성 요소에는 isPlaying 및 isMuted과 같은 몇 가지 상태 속성이 있습니다. 나는 사용자 정의 버튼을 가지고 setState으로 setState으로 컴포넌트를 호출하는 onClick 버튼을 가지고있다.하지만 이것은 물론 컴포넌트를 다시 렌더링하고 비디오 스트림을 다시 마운트하고 다시 원래 상태로 돌아가 첫 번째 프레임으로 되돌려 놓았다. 일반적으로 스트리밍 비디오로 응용 프로그램 (redux) 또는 로컬 상태 변경 사항을 처리하는 방법은 무엇입니까? 필자는 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"를 재정의 할 수 있습니다.

---