Update button class with video.js markerReached function

Question

This one has really got my brain in a twist.

I'm using the great Video.js Markers plugin and want to update my menu buttons with the markerReached callback recently added to the plugin, so when the video hits a new chapter the corresponding button's class is active, until the next chapter begins and updates the button below.

This is each button indicates which chapter is currently playing with an active button next to it.

The buttons already navigate to a timestamp in the video:

<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>

And here's the js for the chapter markers:

// 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"},
  ]
});

So what should I hook the markerReached event into?

Answer 1

Just add onMarkerReached into your options,

// 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"},
  ]
});

See example here - http://www.sampingchuang.com/videojs-markers