Load media file programatically

Nuevo plugin offers easy function to change media source programatically. New source can be of any type supported by HTML5 video, including HLS and MPEG-DASH format. Can include multiple resolution media files, video poster, title, video url and optionally progressbar sprite image.

Javascript Code Tutorial

<!--Always for every player you must initialize player and plugin-->
<script>
	var player = videojs('player_1)';
	player.nuevo({ 
		//option_name: option_value
	}); 
</script>

<script>
	player.changeSource (new_source);
</script>

You can change source on any HTML element click event, just like on button click in example above.

<input type="button" value="Change video source" onclick="player.changeSource(new_source)" />

New Source Definition

The most basic new source element is just URL of media file, eg.

var new_source = '//www.domain.com/video.mp4';

var new_source = '//www.domain.com/playlist.m3u8';

More professional way is is to include media type apart of media file URL, eg.

var new_source = {src: '//www.domain.com/video.mp4', type: 'video/mp4'};

var new_source = {src: '//www.domain.com/playlist.m3u8', type: 'application/x-mpegURL'};

For standard (mp4, webm) streaming it is possible to provide multiple resolution media files as new source and set default resolution to play, eg.

var new_source = {
		  sources: [{
			src: '//www.domain.com/video_720p.mp4',
			type: 'video/mp4', res: '720', label: '720p'
		  }, {
			src: '//www.domain.com/video_480.mp4',
			type: 'video/mp4',res: '480',label: '480p'
		  }, {
			src: '//www.domain.com/video_360.mp4',
			type: 'video/mp4',res: '360',label: '360p', default: true
		  },{
			src: '//www.domain.com/video_240.mp4',
			type: 'video/mp4',res: '240',label: '240p'
		  }],
}

And the most advanced new source definition is to provide media source(s), poster image, video title, video URL to share and optionally progressbar sprite image. See Example for multiple resolution mp4 video just like used in this example page.

	var new_source = {
		  sources: [{
			src: '//www.domain.com/video_720p.mp4',
			type: 'video/mp4',res: '720',label: '720p'
		  }, {
			src: '//www.domain.com/video_480p.mp4',
			type: 'video/mp4',res: '480',label: '480p'
		  }, {
			src: '//www.domain.com/video_360p.mp4',
			type: 'video/mp4',res: '360',label: '360p', default: true
		  },{
			src: '//www.domain.com/video_720p.mp4_240.mp4',
			type: 'video/mp4',res: '240',label: '240p'
		  }],
		  poster: '//www.domain.com/images/video_poster.jpg',
		  slideImage: '//www.domain.com/images/video_slide.jpg',
		  title: 'Video title',
		  url: //www.domain.com/video_page.html'
	}

And example for HLS media M3U* playlist:

var new_source = {
		  sources: [{
			src: '//www.domain.com/video_playlist.m3u8',
			type: 'application/x-mpegURL'
		  },
		  poster: '//www.domain.com/images/video_poster.jpg',
		  slideImage: '//www.domain.com/images/video_slide.jpg',
		  title: 'Video title',
		  url: //www.domain.com/video_page.html'
	}