Question

我正在使用fluxjs与flux架构来运行html5视频。我将用户currentTime存储在我的数据库中，这样当用户返回页面时，用户可以选择恢复或重新启动视频。我在componentDidMount中使用this.video.currentTime设置了视频的currentTime。除了Safari之外，这似乎很漂亮！难道我做错了什么？视频会根据以下说明https://facebook.github.io/react/docs/more-about-refs.html

提供参考

这是我在componentDidMount中引用我的视频的地方：

componentDidMount: function(){
    if (this.video !== null) {
        this.video.currentTime = this.props.persistedCurrentTime;
        this.video.addEventListener('ended', this.handleOnEnded);
    }
},

在渲染中，我对视频进行了参考，这就是为什么我在上面使用this.video。这是该组件的渲染：

render: function() {
    return (
        <video
            ref={function(ref) { this.video = ref }.bind(this)}
            controls={false}
            onClick={this.handleClick}
            onPlay={this.handleOnPlay}
            onPause={this.handleOnPause}
            onTimeUpdate={this.handleTimeUpdate}
            onVolumeChange={this.handleVolumeChange}
            onMute={this.handleMute}
            id="video">
            <source src={this.props.src} type="video/mp4" />
        </video>
    );
}

为了尝试更好地了解发生了什么，我在componentDidMount中使用了几个console.log语句。这是我印刷的内容：

 if (this.video !== null) {
        console.log("this.video = "+this.video)
        console.log("this.props.persistedCurrentTime = "+this.props.persistedCurrentTime)
        console.log("this.video.currentTime = "+this.video.currentTime)
        this.video.currentTime = this.props.persistedCurrentTime;
        console.log("this.video.currentTime = "+this.video.currentTime)
}

在Chrome控制台中，我收到以下反馈：

 this.video = [object HTMLVideoElement]
 this.props.persistedCurrentTime = 35
 this.video.currentTime = 0
 this.video.currentTime = 35

这是我期望收到的，因为它将视频的当前时间推进到35秒。

然而，在Safari中我收到以下内容：

[Log] this.video = [object HTMLVideoElement] (main.js, line 770)
[Log] this.props.persistedCurrentTime = 35 (main.js, line 771)
[Log] this.video.currentTime = 0 (main.js, line 772)
[Log] this.video.currentTime = 0 (main.js, line 774)

请注意，在最后一行中，video.currentTime不是35秒:(为什么!!!!!!很明显，视频元素已从第一行开始安装。更令人抓狂的是如果我在控制台中执行此操作.video.currentTime = 35，视频将移至35秒！

提前感谢您的任何建议。

使用Reactjs（HTML5视频元素）在componentDidMount中设置video.currentTime无法在Safari中运行？

0 个答案: