Question

我正在使用此hls.js player和React来传输m3u8。我有一个组件VideoPlayer来设置hls.js播放器。此组件具有一些状态属性，例如isPlaying和isMuted。我有自定义按钮，onClick将组件功能调用到setState，但这当然会重新渲染组件，视频流重新安装，我想回到它的原始状态，这是回到它是第一帧并且停了下来。一般来说，您如何使用流视频处理应用程序（redux）或本地状态更改？我注意到，只要redux存储更新或本地状态发生变化，视频总会出现这种“闪烁”（即重新渲染）。

使用代码更新示例：

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 - ＆gt; setState - ＆gt; componentUpdate - ＆gt; componentDidUpdate - ＆gt; initPlayer

因此，每次用户播放视频时都会初始化播放器。

您可以覆盖“shouldComponentUpdate”，以防止更新而不初始化播放器。

如何使用http直播HLS处理React生命周期？

1 个答案: