Cloudinary Video Player
Subtitles & Captions
Playlist Subtitles (switch per source)
Full documentation
Example Code:
<video
id="player"
controls
muted
autoplay
class="cld-video-player"
width="500"
></video>
<video
id="playlist"
controls
muted
class="cld-video-player"
width="500"
></video>
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
// Initialize player
var player = cld.videoPlayer('player');
player.source(
'stubhub',
{
textTracks: {
captions: {
label: 'English captions',
language: 'en',
default: true,
url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt'
},
subtitles: [
{
label: 'German subtitles',
language: 'de',
url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt'
},
{
label: 'Russian subtitles',
language: 'ru',
url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt'
}
]
}
}
);
// Playlist
var playlist = cld.videoPlayer('playlist');
var source1 = {
publicId: 'stubhub',
info: { title: 'Subtitles & Captions playlist' },
textTracks: {
captions: {
label: 'English captions',
language: 'en',
default: true,
url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt'
},
subtitles: [
{
label: 'German subtitles',
language: 'de',
url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt'
},
{
label: 'Russian subtitles',
language: 'ru',
url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt'
}
]
}
};
var source2 = {
publicId: 'outdoors',
info: { title: 'Outdoors', subtitle: 'Outdoors movie with captions' },
textTracks: {
captions: {
label: 'English captions',
language: 'en',
default: true,
url: 'https://res.cloudinary.com/demo/raw/upload/outdoors.vtt',
}
}
};
var source3 = {
publicId: 'dog',
info: { title: 'Dog', subtitle: 'Video of a dog, no captions' }
};
var playlistSources = [source1, source2, source3];
var playlistOptions = {
autoAdvance: true,
repeat: true,
presentUpcoming: 8
};
playlist.playlist(playlistSources, playlistOptions);