Question

我想同步两个视频播放器组件的currentTime属性。因此，当一个玩家在玩时，我希望其他玩家跟随该玩家。如果其他玩家之一在玩，情况也是如此。

我认为我需要在我父母的所有球员之间共享一种状态。然后，我需要让玩家订阅父级的状态，或者触发所有玩家的事件。

我不知道该如何反应。我没有要求任何人为我写它，但是如果有人可以解释解决此问题的正确方法，我会很高兴：）

这是我到目前为止所拥有的：

class Player extends React.Component {
  componentDidUpdate() {
    this.refs.player.currentTime = this.props.currentTime;
  }

  render() {
    return (
      <div>
        <video 
          ref="player"
          controls 
          width="250" 
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" 
          onSeeking={this.props.handleSeeking} />
        <p>CurrentTime: {this.props.currentTime}</p>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      currentTime: 0,
      isPlaying: false
    };
    this.handleSeeking = this.handleSeeking.bind(this);
  }

  handlePlaying(e) {

  }

  handleSeeking(e) {
    this.setState({ currentTime: e.currentTarget.currentTime });
  }

  render() {
    return (
      <div>
        <Player 
          currentTime={this.state.currentTime} 
          handleSeeking={this.handleSeeking} />
        <Player 
          currentTime={this.state.currentTime} 
          handleSeeking={this.handleSeeking} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

如果有帮助，这就是我试图编写的内容，但在做出反应时https://github.com/kirkegaard/videocompare/blob/master/src/scripts/app.js（对不起的丑陋代码很抱歉）

同步多个视频的currentTime组件

0 个答案: