Video.js change media source or reconnect

Many users ask how to change video.js source on the fly. You can find some tips in multiple posts however, none is complete or some of player settings not available to set.

Especially when using video.js with Nuevo plugin changing media source with support for multiple possible features and options is not possible without dedicated method.

Nuevo plugin version 5 comes with such dedicated method which allows to change media source and several other media related settings using one javascript function.

video.js change source

Changing video source

The most simple and most easy example of changing media source is to provide new media file URL

<script>
var player = videojs('player_id');
player.changeSource("//www.domain.com/videos.mp4");
</script>

More advanced and suggested way is to provide media file URL and media file type.

<script>
var player = videojs('player_id');
var new_source = {src: "//www.domain.com/videos.mp4", type: "video/mp4"};
player.changeSource(new_source);
</script>

You can change multiple resolution variants of media source to change. In the example below you have 4 different resolution video files with one default to play.

<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/video_480px.mp4",type:"video/mp4",res:"480",label:"480p"}, 
      {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"}
   ]
}
player.changeSource(new_source);
</script>

Finally the most advanced example of changing media source and optional information about video like poster, slideImage for progress thumbs and/or video title.

<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/video_480px.mp4",type:"video/mp4",res:"480",label:"480p"}, 
      {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"}
   ],
   poster: "//www.domain.com/poster.jpg",
   slideImage: "//www.domain.com/slideImage.jpg",
   title: 'new video title'
}
player.changeSource(new_source);
</script>

Live example

Change Source

Reconnect video

Another useful new function of Nuevo plugin is to reconnect current media sources. It can be useful, especially for live stream that tends to disconnect after pausing it. Function usage is very simple.

<script>
var player = videojs('player_id');
player.reconnect();
</script>

Of course you can wrap the javascript code into javascript function and call it e.g. on some button click event. To reconnect video it could be like

<script>
document.getElementById('button_id').onclick = function(e) {
    var player = videojs('player_id');
    player.reconnect();
}
</script>

Or using jquery

<script>
$( "#button_id" ).click(function() {
    var player = videojs('player_id');
    player.reconnect();
}
</script>
Nuevodevel Blog
Nuevodevel Tweeter