reactjs - React.js + 视频元素:从 react props设定当前播放时间?

  显示原文与译文双语对照的内容
0 0

我刚开始工作,这是一个问题,我没有看到一个好解决方案到目前为止。 问题是,当用户单击按钮时,我想将一个视频放在一个标记中。

当前的解决方案如下所示:

componentDidUpdate(prevProps, prevState) {
 console.log("Updating to timestamp:" + this.props.timestamp);
 var timestamp = this.props.timestamp;
 if (timestamp!= prevProps.timestamp) {
 React.findDOMNode(this.refs.theVideo).currentTime = timestamp;
 }
}

问题是,这真是 hacky 。 现在我在这种情况下,用户可以以单击同一个按钮,不会发生任何事情。

这是正确的方法? 现在反应中的一切似乎都是超级逻辑的,但这并不是完全正确的。 在这种情况下,你是否将一个方法暴露给父对象?

时间:原作者:1个回答

0 0

你触摸了question—you中的一个解决方案,可以以在子级上公开设置时间戳的方法。 但是,这是一个非常必要的API,并且可以能与它的它声明性的应用程序不适合。

,project,我用一个声明性的API 实现了类似于你自己的解决方案的类似于declarative的声明:

componentWillReceiveProps: function(props) {
 if (this.props.playing!== props.playing) {
 this.audio[props.playing?"play" :"pause"]();
 }
 if (this.props.lastSeek!== props.lastSeek) {
 var start = props.start,
 offset = props.currentTime - start;
 this.audio.currentTime = offset/1000;
 }
}

通过比较给定的属性上次呈现给它的属性,我们可以以确定音频剪辑时间需要调整。

在声明API之后,你的应用程序不需要知道imperative的API,那么最好的解决方案是创建一个特殊的<Video> 组件;。 所以在你的应用里你可以用

render() {
//...
 <Video url={...} timestamp={this.props.timestamp}/>
}

我在我的meetup对话中讨论了这个概念: ( 大约 7: 04 ) 。

原作者:
...