Electroteque Media

External VTT Data

Markers from VTT generated data

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

WebVTT Marker Data Loading

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

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

WebVTT data

WEBVTT FILE

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

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

3
08:30.000 --> 08:32.000
{
"text": "Marker 3",
"thumbnail": "../images/big_buck_bunny_400k-3.jpeg"
}

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

  <script type="text/javascript">

  	var player = flowplayer("#external-vtt", {
    "clip": {
        "chaptersurl": "../data/markers-metadata.vtt",
        "sources": [
            {
                "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.webm",
                "type": "video/webm"
            },
            {
                "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.mp4",
                "type": "video/mp4"
            },
            {
                "src": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.ogv",
                "type": "video/ogg"
            }
        ]
    },
    "share": false
});

  </script>