Thumbnails

You can add your own unique thumbnail tracks to your videos when constructing the player. Which will be shown when the user hovers over the player progress bar

Thumbnails should be added in a WEBVTT format linked in the video under the "tracks" directive.

The tracks directive is an array of JSON objects that can contain all the related tracks the the video (thumbnails, captions ..etc).

Thumbnails should be added as a JSON object inside "tracks" containing two key values: file and kind.

• file directive is a string varibale that should contain either a URL or a local path to your WEBVTT thumbnails file (.vtt).
• kind directive is a string variable and it should be set to "thumbnails" to identify the added track as a thumbnail file.

WEBVTT thumbnail format should be written as follows:

 WEBVTT

00:00:00.000 --> 00:00:45.000            //the period that the selected thumbnail will represent
https://static.vod-platform.net/videosthumbsimages/admin/500000/th-515002-1-original-4897589-1.jpg#xywh=0,0,127,90  //the thumbnail file

00:00:45.000 --> 00:01:15.000
https://static.vod-platform.net/videosthumbsimages/admin/500000/th-515002-1-original-4897589-2.jpg#xywh=0,0,127,90

00:01:15.000 --> 00:01:45.000
https://static.vod-platform.net/videosthumbsimages/admin/500000/th-515002-1-original-4897589-3.jpg#xywh=0,0,127,90

00:01:45.000 --> 00:02:15.000
https://static.vod-platform.net/videosthumbsimages/admin/500000/th-515002-1-original-4897589-4.jpg#xywh=0,0,127,90

 ...

Below is an example of adding thumbnail tracks to the video:

 <script>
    ...
    kwikMotion("player", {
            sources: [      //video sources
                {file: "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/playlist.m3u8"},
                {file: "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/manifest.mpd"},
                {file: "https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/admin/515002-R204MDrB22W6kG8.smil/Manifest"}],
            tracks: [       //tracks array contains all the different tracks that are added to the video
            {               //our thumbnails object
                file: "https://my-website.com/path/to/my/thumbnails.vtt",   //URL linking to the thumbnail
                // file: "../path/to/my/thumnails.vtt", --local file linking to the thumbnails
                kind: "thumbnails" //identifying the added tracks as thumbnails
            }
            ],
        });
        ...
 </script>
        

Format (should be written as follows):