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>

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

1 个答案: