Electroteque Media

External VTT Data

Markers from VTT generated data

This example demonstrates configuring the plugin with JSON generated data. This includes json data for text and thumbnails.

JSON Marker Data Loading

JSON marker files can be loaded instead. Including thumbnail image metadata. Using the chaptersurl property.

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

JSON data

[{"startTime":120,"text":"Marker 1 Hello Long Text","thumbnail":"../images/big_buck_bunny_400k-1.jpeg"},{"startTime":300,"text":"Marker 2 Hello Long Text","thumbnail":"../images/big_buck_bunny_400k-2.jpeg"},{"startTime":510,"text":"Marker 3","thumbnail":"../images/big_buck_bunny_400k-3.jpeg"}]

    <div class="flex w-full h-auto my-auto">
          <div id="external-vtt" class=""></div>
  </div>

  <script type="text/javascript">

  	var player = jwplayer("external-vtt").setup({
    "aspectratio": "16:9",
    "chaptersurl": "../data/markers-metadata.vtt",
    "playbackRateControls": true,
    "plugins": {
        "../../js/videomarkers-8.1.0.js": {}
    },
    "sources": [
        {
            "file": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.webm",
            "type": "webm"
        },
        {
            "file": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.mp4",
            "type": "mp4"
        }
    ],
    "width": "100%"
});

  </script>