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.
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>
<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>
