Captions

You can add your own caption tracks to your videos when constructing the player. Added caption tracks will be shown as options when the captions icon in the player is pressed.

Captions 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).

Captions should be added as a JSON object inside "tracks", more than one caption objects can be added. Captions objects contain four key values: file, kind, label and default.

• file directive is a string varibale that should contain either a URL or a local path to your WEBVTT captions file (.vtt).
• kind directive is a string variable and it should be set to "caption" to identify the added track as a captions file.
• label directive is a string variable that contains the string that will be shown on the player captions section to represent the specific tracks
• default directive is a boolean variable that represents the whether the current caption is default. Choosing a caption file as a default means that those captions will be automatically displayed when the video plays. Not setting any as a default means that the video will play without captions unless a caption is selected by the user.

WEBVTT caption format should be written as follows:

WEBVTT

00:00:07.800 --> 00:00:08.350           //the duration of the video in which the text will be displayed
behind me right here Saint Patrick's    //the text that will be displayed

00:00:09.160 --> 00:00:11.090
either all going under a one hundred and seventy 

00:00:11.980 --> 00:00:12.460
in dollar restoration 

00:00:14.090 --> 00:00:15.910
to conclude sometime next year 

00:00:16.530 --> 00:00:19.630
animal rights organizations continue to protest the use 

...
        

 <script>
    kwikMotion("player", {
            sources: [      //the 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 first set of captions added to the video
                file: "https://my-website.com/path/to/my/captions.vtt",     //linking to the captions using a URL
                // file: "../path/to/my/captions.vtt",                      --linking to the captions locally.
                label: "EN",            //identifying the caption by EN code (English) which will be shown on the player
                kind: "captions",       //identifying the track as a captions track
                default: true           //setting these captions to be displayed by default when the video plays.
            }, 
            {               //our second captions
                file: "https://my-website.com/path/to/my/ar-captions.vtt",
                kind: "captions",
                label: "AR",            //labeling these captions by the two letters AR for Arabic
                default: false
            },
            ...
            ],
        });
 </script>