Video.js - Change video source with captions programatically

Few months ago we have posted about Nuevo plugin function changeSource. which allows to change video source(s) programmatically, including change of several other video settings like video poster, video title and thumbnails slide image. The function proved to be useful also for playlist of videos introduced through Nuevo plugin.

Some of our users asked about option to change also captions for new video source. We are proud to announce that it's possible in latest 5.6.1 version of Nuevo plugin. When changing video source, now text tracks, video tracks and audio tracks are reseted automatically. You can assign new tracks programatically.

The code and function below changes mp4 video with 3 alternate resolution sources, video poster, video title, progressbar thumbs image and text track.

Code snippet
<script>
var player = videojs('player_id');
var new_source = {
   sources: [
      {src:"//www.domain.com/video_720p.mp4",type:"video/mp4",res:"720",label:"720p"}, 
      {src:"//www.domain.com/videos_360p.mp4",type:"video/mp4",res:"360",label:"360p",default:true},
      {src:"//www.domain.com/videos_240p.mp4",type:"video/mp4",res:"240",label:"240p",default:true},
   ],
   track: { kind:"captions", src:"path-to-captions,vtt", srclang:"en", label:"English" },
   poster: "//www.domain.com/poster.jpg",
   slideImage: "//www.domain.com/slideImage.jpg",
   title: 'new video title'
}
player.changeSource(new_source);
</script>

Put attention to the line with track element.

It is also possible to assign multiple text tracks fro different languages.

Code snippet
<script>
var player = videojs('player_id');
var new_source = {
   sources: [
      {src:"//www.domain.com/video_720p.mp4",type:"video/mp4",res:"720",label:"720p"}, 
      {src:"//www.domain.com/videos_360p.mp4",type:"video/mp4",res:"360",label:"360p",default:true},
      {src:"//www.domain.com/videos_240p.mp4",type:"video/mp4",res:"240",label:"240p",default:true},
   ],
   tracks: [
      {kind:"captions", src:"path-to-english captions,vtt", srclang:"en", label:"English",default:true},
      {kind:"captions", src:"path-to-french-captions,vtt", srclang:"fr", label:"French"},
      {kind:"captions", src:"path-to-spanish-captions,vtt", srclang:"es", label:"Spanish"}
   ],
   poster: "//www.domain.com/poster.jpg",
   slideImage: "//www.domain.com/slideImage.jpg",
   title: 'new video title'
}
player.changeSource(new_source);
</script>

Don't forget to set default language.

Nuevodevel Blog
Nuevodevel Tweeter