Videojs：动态获取视频的时间戳

Question

我正在尝试实施一个课程门户，视频将在本地上传并可供学生学习。我正在尝试创建一个交互式系统：当视频到达特定时间时会产生一个问题。

为此，我将“video-js”插件用于 Flash 和 HTML5 播放器。现在我想做的是跟踪视频的时间。因此，当视频到达特定时间时，我将能够在特定时间进行显示问题的 ajax 调用。

为此，我使用了 video-js 插件的“durationchange”。但它只给出第 0 秒，如下面的代码所示

video1 = videojs('mplayer');
video1.on('durationchange', event);

var video1 = function(){

  currentTime = video1.currentTime; // nothing

}

我该怎么办。请帮我。谢谢。

Answer 1

您实际上需要使用该timeupdate事件 -durationchange只有在视频持续时间发生变化时才会触发（通常在元数据加载完成时）

然后，您可以跟踪视频的 currentTime 属性：

使用基本的javascript

<video id="video" preload="auto" loop autoplay controls muted>     
    <source src="bigbuck.m4v" type='video/mp4' />
</video>

<div id="timer"> </div>

<script>
document.getElementById("video").addEventListener('timeupdate', function() {
    document.getElementById("timer").innerHTML = this.currentTime;
    currentTime = this.currentTime;
});
</script>