如何从我的 video.js 播放器监听 "timeupdate" 事件?
How can I listen for the "timeupdate" event from my video.js player?
虽然我已经能够用普通 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 运作的基本方式?
我必须在视频加载前添加事件侦听器。我通过将脚本更改为:
解决了这个问题
<script>
$('#testvid').on('timeupdate', function(){
console.log('the time was updated to: ' + this.currentTime);
});
videojs('testvid').ready(function(){
var myPlayer = this;
});
</script>
其实你可以在ready()的回调中注册事件,这是更好的解决方案,因为之前的事件注册仍然可以在ready()之后完成。使用以下代码段:
videojs('example_video_1').ready(function () {
this.on('timeupdate', function () {
console.log(this.currentTime());
})
});
虽然我已经能够用普通 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 运作的基本方式?
我必须在视频加载前添加事件侦听器。我通过将脚本更改为:
解决了这个问题<script>
$('#testvid').on('timeupdate', function(){
console.log('the time was updated to: ' + this.currentTime);
});
videojs('testvid').ready(function(){
var myPlayer = this;
});
</script>
其实你可以在ready()的回调中注册事件,这是更好的解决方案,因为之前的事件注册仍然可以在ready()之后完成。使用以下代码段:
videojs('example_video_1').ready(function () {
this.on('timeupdate', function () {
console.log(this.currentTime());
})
});