Question

这里有一个link to the sandbox。我正在寻找操纵<video>元素的currentTime的最佳方法。在我的沙箱中，我可以通过使按钮调用函数seek()来完成此操作，该函数可以更改video的状态（对document.getElementById('video-player')的引用，请参见下文）。

export default class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      source: props.source,
      timestamp: props.timestamp
    };
  }

  componentDidMount() {
    this.setState({ video: document.getElementById('video-player') })
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState(
        { timestamp: this.props.timestamp }, 
        () => { this.seek() }
      );
    }
  }

  seek = () => {
    console.log(this.state.timestamp)
    //works
    this.state.video.currentTime = 1;
    //doesn't work
    //this.state.video.currentTime = this.state.timestamp;
  }

  render() {
    return (
      <div>
        <video 
          id='video-player'
          height='200px'
          src={this.state.source} 
          type='video/mp4'
          controls>
        </video>
        {/* I don't want this button. I want skip from the outside */}
        <button onClick={this.seek}>Skip Inside Component</button>
      </div>
    );
  }
}

我不知道的事情是，我只能设法更改组件内部的currentTime，因为无论出于何种原因，我都无法为this.state.timestamp引用的currentTime分配<video>（ this.state.video.currentTime）。

最终，组件应接收Redux提供的props.timestamp，只要Redux的状态发生变化，就应在seek()内调用<VideoPlayer />，并将视频的currentTime设置为this.state.timestamp。

让我知道你们是否需要更多详细信息。预先感谢！

编辑：以上已得到解答，但我仍然遇到问题。我共享并刚刚修复的沙箱仍然无法在我的rails project中使用。我感觉不会。单击App.js中的三个按钮之一后，状态将在Redux中更改，并由<VideoPlayer>成功接收。我在seek()内的console.log确认了这一点，该控制台将相应按钮的值返回到控制台。但是，视频的currentTime仍然没有改变。这里有什么想法吗？

Answer 1

在mapStateToProps中，您的state是，是{strong> timestamp，而不是state.timestampReducer。

这应该有效：

const mapStateToProps = (state) => { return { timestamp: state } };

Answer 2

反应状态通常用于管理UI状态，例如：暂停，播放，currentTime等，因此应避免将dom元素分配给状态this.setState({ video: document.getElementById('video-player') })

如果您想更改反应的状态，请不要像查找功能一样使用this.state = something 。请改用setState函数。

Answer 3

使用引用而不是状态来访问您的视频。

带类：

constructor(props) {
  super(props);
  this.videoRef = React.createRef();
}

...

this.videoRef.current.currentTime = this.state.timestamp;

带钩子：

const videoRef = useRef(null);

...

videoRef.current.currentTime = timestamp;

并实施：

使用React组件状态更改currentTime

3 个答案: