Comment gérer le cycle de vie React avec http live streaming HLS?

Question

J'utilise ce hls.js player avec React pour diffuser m3u8. J'ai un composant VideoPlayer qui configure le lecteur hls.js. Ce composant a quelques propriétés d'état, telles que isPlaying et isMuted. J'ai des boutons personnalisés qui onClick appellent des fonctions de composant à setState, mais cela rend bien sûr le composant et le flux vidéo ré-monte que je devine et est de retour à son état original, qui est de retour à sa première image et arrêté. En général, comment gérez-vous l'application (redux) ou les changements d'état locaux avec la vidéo en streaming? Je remarque que les vidéos ont toujours ce "scintillement" (qui est en train d'être rendu) à chaque fois que le magasin Redux se met à jour, ou change d'état local.

AVEC MISE A JOUR EXEMPLE DE CODE:

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

Je pense que le problème est le cycle de vie des composants.

playVideo -> setState -> componentUpdate -> componentDidUpdate -> initPlayer

Ainsi, le joueur est initialisé à chaque fois que l'utilisateur joue la vidéo.

Vous pouvez remplacer "shouldComponentUpdate" afin d'empêcher la mise à jour sans initialiser le lecteur.

---