Configuration

Here is a list of the configuration options:

Property Description Default
container Selector for the markers list container. If set this will generate a markers list with clickable seek points.
menu Enable a chapters menu for cue selection. false

Markers Clip Configuration

Here is a list of the configuration options:

Property Description Default
markers The markers data as an array of object data. Possible properties are startTime, endTime, text, data, style. In the data config custom data like thumbnails and other properties can be added here. 
{
  "markers": [
    {
      "startTime": 5,
      "text": "Marker 1 Hello Long Text",
      "data": {
        "thumbnail": "images/thumbnails/big_buck_bunny_400k-1.jpeg"
      }
    },
    {
      "startTime": 300,
      "text": "Marker 2 Hello Long Text",
      "data": {
        "thumbnail": "images/thumbnails/big_buck_bunny_400k-2.jpeg"
      }
    },
    {
      "startTime": 510,
      "text": "Marker 3",
      "data": {
        "thumbnail": "images/thumbnails/big_buck_bunny_400k-3.jpeg"
      }
    }
  ]
}

External JSON Data Configuration

{
  "chaptersurl": "../data/markers.json"
}

External VTT Configuration

{
  "chaptersurl": "../data/markers-metadata.vtt"
}

WebVTT Format with text or JSON data.

1
02:00.000 --> 02:02.000
Marker 1 Hello Long Text

1
02:00.000 --> 02:02.000
{
    "text": "Marker 1 Hello Long Text",
    "thumbnail": "images/thumbnails/big_buck_bunny_400k-1.jpeg"
}

Video Marker Style Options

Property Description Default
markers-nav When the style is added to the player container style, this will enable the marker navigation buttons.
is-alternate When the style is added to the player container style, this will enable alternating marker styles with the style name alternate.