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>
