如何在Video.js播放器中捕获PLAY和STOP事件？

Video.js 内置了标准化的播放相关事件，直接监听播放器实例的对应事件即可覆盖所有触发场景（包括按钮点击、键盘快捷键操作、API调用触发等），无需单独绑定按钮点击事件： #

基础实现示例 #

// 初始化播放器，替换为你实际的播放器DOM ID
const myPlayer = videojs('my-video-player');

// 监听播放事件，所有触发播放的操作都会走这个回调
myPlayer.on('play', function() {
  // 此处编写播放触发时的自定义逻辑
  console.log('播放已启动');
});

// 监听暂停事件
myPlayer.on('pause', function() {
  // 此处编写暂停触发时的通用自定义逻辑
  console.log('播放已暂停');

  // 如需区分「普通暂停」和「停止操作」（停止一般是暂停+进度归零），可增加进度判断
  if (myPlayer.currentTime() === 0) {
    // 此处编写停止操作专属的自定义逻辑
    console.log('播放已停止，进度已归零');
  }
});

可选：单独绑定控制栏按钮点击事件 #

如果你只需要监听用户点击播放/停止按钮的动作，不需要覆盖其他触发场景，可以直接绑定控制栏元素的点击事件：

// 绑定播放/暂停切换按钮点击事件
myPlayer.controlBar.playToggle.on('click', function() {
  if (myPlayer.paused()) {
    console.log('用户点击了播放按钮');
  } else {
    console.log('用户点击了暂停按钮');
  }
});

// 如果你自定义了停止按钮，可同理绑定点击事件：
// myPlayer.controlBar.stopButton.on('click', () => { /* 自定义逻辑 */ })

注意事项 #

• 所有事件绑定操作需要在播放器初始化完成后执行，你可以将绑定逻辑放在播放器初始化的回调函数中，避免实例未创建导致的报错：

  videojs('my-video-player', {}, function onPlayerReady() {
    // 播放器初始化完成，此处执行事件绑定
    this.on('play', () => { /* 逻辑 */ });
  });
  

• Video.js 没有内置的stop原生事件，常规的停止操作是通过暂停+重置播放进度实现的，如果有自定义停止按钮的需求，你可以自行触发自定义事件供全局监听。

内容的提问来源于stack exchange，提问作者Volatil3