使用 video.js markerReached 函数更新按钮 class

Question

这个真的让我脑子转了转。

我正在使用很棒的 Video.js Markers 插件，并希望使用最近添加到插件的 markerReached 回调来更新我的菜单按钮，因此当视频进入新章节时，相应按钮的 class处于活动状态，直到下一章开始并更新下面的按钮。

这是每个按钮指示当前正在播放的章节，旁边有一个活动按钮。

按钮已导航到视频中的时间戳：

<div class="menu">

<button onclick="setCurTime(2)" type="button" value="2">Chapter 1</button>
<button onclick="setCurTime(57)" type="button" value="57">Chapter 2</button>

</div>

这是章节标记的 js：

// initialize video.js
var video = videojs('current_video');

//load the marker plugin
video.markers({
  markers: [
     {time: 2,   text: "Chapter 1"},
     {time: 57,  text: "Chapter 2"},
  ]
});

那么我应该将 markerReached 事件挂接到什么地方？

Answer 1

只需将 onMarkerReached 添加到您的选项中，

// initialize video.js
var video = videojs('current_video');

//load the marker plugin
video.markers({
  onMarkerReached: function(marker) { /* do stuff */ },
  markers: [
     {time: 2,   text: "Chapter 1"},
     {time: 57,  text: "Chapter 2"},
  ]
});

参见此处的示例 - http://www.sampingchuang.com/videojs-markers

使用 video.js markerReached 函数更新按钮 class

Update button class with video.js markerReached function

javascript

button

video.js