Videojs - load VTT tracks programatically

September 20, 2020

Nuevo plugin version 6.3.1 for videojs player introduce new method to load VTT tracks programmatically. Method loadTracks can be used to load VTT files with captions (subtitles), chapters or even preview thumbnails protocol. loadTracks can be used once Nuevo plugin is loaded.

Code tutorial on using loadTracks method to load VTT chapters was already presented and is used on Videojs chapters example page. It is quite easy and especially useful for iOS devices. Chapters loaded through HTML Tag will not appear on iOS device opposite to chapters loaded programmatically.

Code snippet

<script>
  var chapters = ({ kind:"chapters", src:"//path-to-chapters-file.vtt" srclang:"en"});
  player.on('nuevoReady', function(){ player.loadTracks(chapters); });
</script>

You can use the same loadTracks method to load VTT captions/subtitles. Check code examples of loading a single or multiple captions file(s).

Code snippet

<script>
  var single_captions = ({ kind:"captions", src:"//path-to-captions-file.vtt" srclang:"en", label:"English"});
  player.on('nuevoReady', function(){ player.loadTracks(single_captions); });
</script>

Code snippet

<script>
  var multi_captions = ([
    { kind:"captions", src:"//path-to-captions-file-en.vtt" srclang:"en", label:"English"},
    { kind:"captions", src:"//path-to-captions-file-it.vtt" srclang:"en", label:"Italian"},
    { kind:"captions", src:"//path-to-captions-file-de.vtt" srclang:"en", label:"German"},
]);
  player.on('nuevoReady', function(){ player.loadTracks(multi_captions); });
</script>

Finally, you can use the same method to load VTTpreview thumnails presented and explained on this example page.

Code snippet

<script>
  var thumbnails = ({ kind:"metadata", src:"//path-to-thumbnails-file.vtt" });
  player.on('nuevoReady', function(){ 
     player.thumbnails();  // initialize plugin only if it was not initialized before.
     player.loadTracks(thumbnails); 
  });
</script>

Videojs - load VTT tracks programatically

Newsletter