Videojs-markers

The general css styling that would be applied to all the markers created by the plugin. The default is only concerned with width, border-radius, and background-color, but any other css rules would be applied too (think of it as jQuery's css function).

Set up square, orange markers:

{
   'width':'7px',
   'border-radius': '0%',
   'background-color': 'orange'
}

Whether markerTips are displayed or not. Default to true.

Callback function for dynamically constructing your marker tip text. Simply return a string. The argument marker is the marker object passed to the plugin.

Show time of the marker (hh::mm::ss format):

function(marker) {
   var seconds = marker.time % 60;
   var minutes = parseInt(marker.time / 60) % 60;
   var hours = parseInt(marker.time / (60 * 60)) ;
   return hours + ":" + minutes + ":" + seconds;
}

Callback function for dynamically getting the time for the marker. The plugin makes no assumption of where the time attribute is located in the marker object. This allows you to use existing formats to represent time (in seconds). The default function uses marker.time.

Whether overlays are displayed or not. Default to false.

The number of seconds a overlay is shown from the beginning of its marker.. Default to 3 seconds.

Setup css styles for the overlays (play around with color, font-size, and height). Similar to markerStyle, any other css styles not in the default options would still be applied.

Same idea as markerTip's text callback mentioned above. This callback function is used to dynamically construct your overlay text. Simply return a string.

function(marker) {
   return "You can setup anything here" + marker.overlay;
}

This callback function is triggered whenever playback reaches the time interval from a marker. The interval is specified in the breakOverlay.displayTime . This can be used to trigger certain actions at each marker, depending on your use case. Again, this function is given a marker instance. In 0.6.0, the function also takes in a second parameter index.

function(marker, index) {
   alert ("I just reached a marker!");
}

This callback function is triggered when clicking on the markers. The default behavior for clicking on the marker is seeking to that point in the video. However, if onMarkerClick returns false, the default behavior will be prevented.

function(marker) {
   alert ("I just clicked on a marker!");
}

An array of markers to display by the plugin. For each marker, you can specify the following:

{
   time : 10,
   text: "marker text 1",
   overlayText: 'overlay text 1',
   class: 'custom-marker-class'
}

The time field is required, while the rest are optional. text and overlay are handy fields for setting up the markerTip and overlay text. class should be used when you want to have different colors for different markers which wouldn't be possible with the universal markerStyle.

[{
   time: 10,
   text: "red marker",
   class: "red-marker-class"
},
{
   time: 20,
   text: "blue marker",
   class: "blue-marker-class"
}]

Returns the array of current markers in the plugin, sorted by ascending time.

Go to the next marker from the current time in the video. If there's isn't a next marker, then does nothing.

Go to the pervious marker from the current time in the video. If there's isn't one, then does nothing.

Starting in v0.5.0, we allow modifying the marker's time dynamically (from the original marker object passed in). Once marker times have been changed, updateTime should be called to immediately reflect the changes in the UI.

Add a second to all the markers

var markers = player.markers.getMarkers();
for (var i = 0; i < markers.length; i++) {
   markers[i].time += 1
}
player.markers.updateTime();

Remove the markers in the given array of indices. Note the index is 0-based (e.g. first marker has index 0).

Remove the 2nd and 3rd marker:

player.markers.remove([1,2]);

Remove all the markers in the player.

Dynamically add new markers.

player.markers.add([{
   time: 40,
   text: "I'm added dynamically"
}]);

player.markers.reset([{
   time: 40,
   text: "I'm new"
},
{
   time:20,
   text: "I'm new too"
}]);