Wie wird der React Life Cycle mit http Live Streaming HLS gehandhabt?

Question

Ich verwende diese hls.js player zusammen mit React zu streamen m3u8. Ich habe eine Komponente VideoPlayer, die den hls.js Player einrichtet. Diese Komponente verfügt über einige Statuseigenschaften, z. B. isPlaying und isMuted. Ich habe benutzerdefinierte Tasten, die onClick Komponente Funktionen aufrufen, um setState, aber das natürlich wieder rendert die Komponente und der Video-Stream re-mounts ich denke und ist zurück in den ursprünglichen Zustand, der zurück zu seinem ersten Frame und gestoppt ist. Wie gehen Sie im Allgemeinen mit Änderungen der Anwendung (Redux) oder des lokalen Status bei Streaming-Video um? Ich bemerke, dass die Videos immer dieses "Flimmern" haben (das wird neu gerendert), immer wenn der Redux-Speicher aktualisiert wird oder sich der lokale Status ändert.

UPDATE MIT CODE-BEISPIEL:

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

denke ich, das Problem der Komponente Lebenszyklus.

playvideo -> setState -> componentUpdate -> componentDidUpdate -> initPlayer

So wird der Spieler jedes Mal initialisiert, wenn der Benutzer das Video spielt.

Sie können "shouldComponentUpdate" überschreiben, damit die Aktualisierung ohne Initialisieren des Players verhindert wird.

---