Set video source programmatically

Several users asked us how to set media source and corresponding data like captions, chapters, etc. progrmmatically instead of video element parameters.

Usually people make use of videojs src() function to load media source programattically, however it allows only to set media source. With Nuevo plugin you can make use of changeSource() function. Hoever since this is Nuevo plugin function, you can use it only once Nuevo plugin is loaded.

Check video example below. Media source, video poster, video title, captions and chapters, all is loaded programmatically!

Mango Open Movie Project

Setup tutorial

As for every video and player first you must load player css stylesheet, videojs and nuevo javascript files.

Inside your website's body setup empty video element

 <video id="myplayer" class="video-js vjs-fluid vjs-default-skin" controls preload playsinline></video>

Now you can initialize player and Nuevo plugin, setup media source(s), poster, captions, chapters, etc., all programmatically using javascript function.

<script>
  var player = videojs("myplayer");
  player.nuevo();
  var video_source = {
    sources:{ src:"path-to-playlist.m3u8",type:"application/x-mpegURL"},
    tracks:[
      {kind:"captions", src:"path-to-captions_en.vtt", srclang:"en", label:"English",default:true},
      {kind:"captions", src:"path-to-captions_de.vtt", srclang:"de", label:"German"},
      {kind:"captions", src:"path-to-captions_fr.vtt", srclang:"fr", label:"French"},
      {kind:"captions", src:"path-to-captions_it.vtt", srclang:"it", label:"Italian"},
      {kind:"chapters", src:"path-to-chapters.vtt", label:"Chapters", srclang:"en"}
    ],
    poster: "path-to-poster.jpg",
    title: 'Video Title'
  }
  player.on('nuevoReady', function(){
    player.changeSource(video_source);
  });
</script>

changeSource() Nuevo plugin function was basically designed to change existing media source to new one, but as you can see it can be used to setup initial player source as well.

Interesting thing is that when you define chapters track from video HTML element, chapters button and menu will not appear on iOS browsers, even if chapter tracks are properly detected by videojs and chapters markers can be properly applied. This is videojs bug, verified using default videojs player. However if you apply chapters programmatically like in example above, the chapters button and menu is showing fine on iOS browsers,