How to add captions to videos in a videojs playlist?

I'm in the process of recreating the official videojs advanced player example.

So far so good, but I am wanting to add captions to each video in the playlist.

Is that possible?

I am using the following plugins:

The videojs docs on tracks when implemented within a video tag are here:

http://docs.videojs.com/docs/guides/tracks.html

And they suggest using this HTML:

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup='{"example_option":true}'>
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
    <track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
</video>

However, as I am using a playlist, I instantiate like this:

HTML

<section class="main-preview-player">
    <video id="preview-player" class="video-js vjs-default-skin vjs-fluid" controls preload="none">
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
    </video>
    <div class="playlist-container preview-player-dimensions vjs-fluid">
        <div class="vjs-playlist"></div>
    </div>
</section>

var my_video_id = videojs('preview-player');

// define an array of playlist item objects
var my_playlist = [{
        name: 'Video Title',
        description: 'Description goes here',
        duration: 45,
        sources: [
            { src: 'http://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' },
            { src: 'http://vjs.zencdn.net/v/oceans.webm', type: 'video/webm' },
        ],
        poster: 'oceans.jpg',
        // you can use <picture> syntax to display responsive images
        thumbnail: [{
            srcset: 'oceans.jpg',
            type: 'image/jpeg',
            media: '(min-width: 400px;)'
        }, {
            src: 'oceans-low.jpg'
        }]
    },
    // and more entries like this
];

// instantiate the playlist
my_video_id.playlist(my_playlist);

// set to play next track at end of track
my_video_id.playlist.autoadvance(0);

// instantiate the playlist ui
my_video_id.playlistUi();

Playlist Item Structure

As shown above, the playlist item structure looks like this:

{
name: 'Video Title',
description: 'Description goes here',
duration: 45,
sources: [
{ src: 'http://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' },
{ src: 'http://vjs.zencdn.net/v/oceans.webm', type: 'video/webm' },
],
poster: 'oceans.jpg',
// you can use <picture> syntax to display responsive images
thumbnail: [
{
srcset: 'oceans.jpg',
type: 'image/jpeg',
media: '(min-width: 400px;)'
},
{
src: 'oceans-low.jpg'
}
]
}

Can captions be defined somewhere in that object?

Otherwise, how can captions be shown for each video in a playlist?

Solution

This worked for me (use this in playlist item object):

"textTracks":[ { "kind":"captions", "label":"French", "src":"/path/to/webvtt", "default":false } ]

Per:

https://github.com/brightcove/videojs-playlist/issues/47