如何在Video.js中捕获ChaptersButton的选中事件？

你之前的思路错在直接给ChaptersButton或其菜单绑定事件，章节菜单的每个选项是独立的MenuItem，它们的交互会被Video.js内部处理，不会直接触发按钮/菜单的click或select事件。正确的做法是监听播放器或文本轨道的内置事件：

方法一：监听播放器的chapterchange事件 #

Video.js 原生提供了chapterchange事件，当用户点击章节菜单切换章节（或播放自动切换章节）时触发，直接在播放器实例上监听即可获取选中章节的信息：

player.on('chapterchange', function() {
  const currentChapter = player.chapters().currentChapter();
  if (currentChapter) {
    // 获取选中章节的起始时间
    const selectedTime = currentChapter.startTime;
    // 获取章节标题
    const chapterTitle = currentChapter.label;
    
    console.log('选中章节的时间：', selectedTime);
    // 在这里添加你要展示其他内容的逻辑
  }
});

方法二：监听章节文本轨道的cuechange事件 #

章节是基于WebVTT文本轨道实现的，你可以直接获取对应的文本轨道，监听其cuechange事件来捕获选中的提示点：

// 获取章节对应的文本轨道（需确保你的WebVTT轨道id为'chapters'，可根据实际调整）
const chaptersTrack = player.textTracks().getTrackById('chapters');

if (chaptersTrack) {
  chaptersTrack.addEventListener('cuechange', function() {
    const activeCues = this.activeCues;
    if (activeCues.length > 0) {
      const selectedCue = activeCues[0];
      // 获取选中提示点的起始时间
      const cueStartTime = selectedCue.startTime;
      
      console.log('选中提示点的时间：', cueStartTime);
      // 处理后续展示逻辑
    }
  });
}

注意：如果你的WebVTT轨道没有设置id，可以通过遍历player.textTracks()的方式找到类型为'chapters'的轨道：

let chaptersTrack;
const tracks = player.textTracks();
for (let i = 0; i < tracks.length; i++) {
  if (tracks[i].kind === 'chapters') {
    chaptersTrack = tracks[i];
    break;
  }
}

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