Video.js - Change video source with captions programatically

April 3, 2020

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 or chapters for new video source. This is possible using custom Nuevo plugin function. 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>

Video.js - Change video source with captions programatically

Newsletter