How can I listen for the "timeupdate" event from my video.js player?

Question

While I have been able to listen for the "timeupdate" event with a vanilla HTML5 player, I can't seem to get it to work with video.js.

Here's my code:

<!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>

Am I misunderstanding a basic way that video.js operates?

score 19 · Answer 1 · answered May 09 '16 at 23:08

19

You actually CAN register events in callback of ready(), and it is better solution because in previous one registration of event still could be finished after ready(). Use following snippet:

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

answered May 09 '16 at 23:08

Grigory

191
1
2

Thanks, this is the best answer IMHO! – jwal Apr 11 '17 at 22:42

score 9 · Accepted Answer · answered Apr 14 '15 at 03:56

I have to add the event listener before the video loads. I solved the problem by changing the script to:

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

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

How can I listen for the "timeupdate" event from my video.js player?

2 Answers2

Linked