Menu

Add text tracks to thisPlayer

Adding text tracks to the player is not hard to do. thisPlayer supports just VTT format of text tracks. To understand how to edit or write VTT files visit understanding of how to edit VTT files page. There are two ways to add text tracks to the player, it depends on how you generate thisPlayer.

If you're using HTML setup of the player see an example of how to setup text tracks below:

<video data-thisplayer>
    <!-- English text tracks -->
    <track label="Eng"
        src="/your-folder/text-tracks-eng.vtt">
    <!-- Russian text tracks -->
    <track default
        label="Rus"
        src="/your-folder/text-tracks-rus.vtt">
    <!-- You can have more text track elements for different languages etc... -->

    <source src="/your-folder/video1.mp4">
    <source src="/your-folder/video2.mp4" type="video/mp4">
</video>

As you can see all you need to do is to set <track> as child of HTML5 media (<video> or <audio>) element and specify it's attributes as it is show above. And of course do not forget data-thisplayer attribute of the HTML5 media player when you are using regular HTML setup of thisPlayer.

In case of JavaScript setup, setting the text tracks can be done with textTracks option. An example below shows how to use that option:

var tp = thisPlayer({
    container: '#player-container',
    resources: [
        '/your-folder/your-video.4gp',
        '/your-folder/your-video.ogv',
    ],
    textTracks: [
        { // English text tracks item
            id: 1,
            label: 'Eng',
            src: '/your-folder/text-tracks-eng.vtt'
        },
        { // Russian text tracks item
            id: 2,
            label: 'Geo',
            src: '/your-folder/text-tracks-rus.vtt',
            default: true
        }
        // You can have more text track elements for different languages etc...
    ]
});

See the explanations of properties/attributes for both HTML and JavaScript cases below:

label

Label text to show on player frontend.

src

Path of text track file.

default

Optional attribute to define default text track. Do not specify it if you want text tracks to be default turned off.

id

Use just in case of js setup to keep the item unique. so make the id property always unique!

So seems it is not so hard right?? You are just specifying each property value of textTracks option and it is done.

Get or change text track manually

There is an fantastic method texttrack() of thisPlayer which returns current text track item URL (URL is used as key of each text track item) or changes text track by setting existing text track URL.

According code above tp is an instance of thisPlayer. So see an example how it returns current text track URL:

tp.texttrack();

And see an example how to set new text track using URL:

tp.texttrack('/your-folder/text-tracks-eng.vtt');

After running code line above, a text track item with URL '/your-folder/text-tracks-eng.vtt' will be activated. So it changes text track item by URL and returns thisPlayer object.

When text track changes - Event

An event texttrackchange fires when text track changes manually or by user gesture on thisPlayer UI. Callback of this function provides whole text tracks object and current text track item id arguments. See an example below:

tp.on('texttrackchange', function(tt, url){
    // [tt] whole text tracks object provided as callback argument
    // [url] URL of current text track item
});

So that's it regarding text tracks. Hope it helps to create your cool player :) Have fun!!