如何从我的 video.js 播放器中收听“timeupdate”事件？答案

【问题标题】：How can I listen for the "timeupdate" event from my video.js player?如何从我的 video.js 播放器中收听“timeupdate”事件？
【发布时间】：2015-04-14 03:49:19
【问题描述】：

虽然我已经能够使用普通 HTML5 播放器收听“timeupdate”事件，但我似乎无法让它与 video.js 一起使用。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <link href="video-js.css" rel="stylesheet">
    <script src="video.js"></script>
    <script src="jquery.min.js"></script>
</head>

<body>
    <video id="testvid" class="video-js vjs-default-skin" controls  width="640" height="480" data-setup='{}'>
        <source src="testvideo.mp4" type="video/mp4">
    </video>
</body>

</html>

<script>
videojs('testvid').ready(function(){
    var myPlayer = this;
    $(myPlayer).bind('timeupdate', function(){
        console.log('the time was updated to: ' + this.currentTime);
    });
});
</script>

我是否误解了 video.js 的基本运作方式？

【问题讨论】：

标签： javascript html video.js

【解决方案1】：

你实际上可以在ready()的回调中注册事件，这是更好的解决方案，因为在前一个事件注册仍然可以在ready()之后完成。使用以下sn-p：

videojs('example_video_1').ready(function () {
    this.on('timeupdate', function () {
      console.log(this.currentTime());
    })
  });

【讨论】：

谢谢，恕我直言，这是最好的答案！

【解决方案2】：

我必须在视频加载之前添加事件监听器。我通过将脚本更改为：

<script>
$('#testvid').on('timeupdate', function(){
    console.log('the time was updated to: ' + this.currentTime);
});

videojs('testvid').ready(function(){
    var myPlayer = this;
});
</script>

【讨论】：