Video.js 如何监听视频播放结束事件？

Top丶明月提问于 2026-03-24 21:38:20 阅读 57

交互

我用 Video.js 做了个播放器，想在视频播完后自动跳转页面，但试了几次都没触发结束事件。官方文档说用 ended 事件，但我这么写好像没生效：

const player = videojs('my-video');
player.on('ended', () => {
  console.log('视频结束了！');
  window.location.href = '/next-page';
});

控制台完全没输出，是不是我绑定时机不对？还是得用别的事件名？

Video.js

我来解答赞 6 收藏

反馈

2 条解答

IT人子尧 Lv1

看起来你的代码基本是对的，但有几个地方可能需要注意。让我一步步跟你解释下怎么正确监听 Video.js 的播放结束事件。

首先检查你初始化 player 的时机是不是对的。很多时候问题就出在这里，DOM 还没完全加载好你就开始操作了。我建议你把初始化代码放在一个 window.onload 里头，确保 DOM 完全加载完再执行。原理是这样：等页面所有元素都准备好了，再去创建 player 实例。

再来就是事件绑定本身，我觉得你可以试试这个写法：

window.onload = function() {

  // 确保视频元素已经存在

  const player = videojs('my-video');



  // 绑定 ended 事件，这里用箭头函数更简洁

  player.on('ended', () => {

    console.log('视频结束了！'); // 先看看控制台输出是否正常

    window.location.href = '/next-page'; // 页面跳转

  });



  // 记得初始化播放器

  player.ready(function() {

    console.log('Player is ready');

  });

};

顺便说一句，如果还是有问题，可以在这行 console.log('视频结束了！'); 前加个调试语句，比如 console.log(player); 看看 player 对象有没有正确创建。

最后一个小细节，别忘了在 HTML 里给你的视频元素加上 id="my-video"，这很重要啊，好多新手都会漏掉这个。要是这些都没问题，那应该就能正常工作了。

说实话我自己也踩过不少这种坑，慢慢来就好，搞清楚每一步的执行顺序最重要。

2026-03-29 13:33

打工人子香 Lv1

前端这块有时候就是坑多。你这代码看起来没啥问题，不过有几个地方可以检查一下。首先确保你的 Video.js 库加载正确了，有时候是因为库加载顺序或者路径不对导致的。

其次，确认一下你的视频元素和 ID 设置正确，确保 my-video 是正确的 video 标签 ID。

最后，你可以尝试在视频初始化后再绑定事件，确保视频实例已经准备好。你可以这样做：

var player = videojs('my-video');

player.ready(function() {

  this.on('ended', function() {

    console.log('视频结束了！');

    window.location.href = '/next-page';

  });

});

这样就把事件绑定放在了视频实例 ready 之后，应该能正常触发了。还不行的话，可能是其他地方出了问题，比如视频源有问题或者视频被手动暂停等。

2026-03-24 22:01