Videos Playlist through Videojs and Nuevo plugin

PLAYLIST

Nuevodevel demo video
02:09
BMW M4 - "Ultimate Racetrack"
01:09
LG Cymatic Jazz
02:35
Big Buck Bunny
02:17

Current Time 0:00

Duration -:-

Loaded: 0%

Stream Type LIVE

Remaining Time -:-

ZOOM HELP

Drag zoomed area using your mouse.

100%

Original Playlist Plugin by Nuevodevel does not require to load any additional css or javascript files. All you need is to setup playlist javascript array of media items. Playlist single item required parameters are: media file URL and thumb image URL. Other parameters that you may include are: media title, media duration and sprite image to show thumbs over progressbar.
Media files can be of different type supported by HTML5 and videojs. You should only provide media mime-type along media src attribute. For standard MP4/WEBM media files you can include multiple source files URLs to support resolution switcher. Check playlist example used in video above.

Playlist Array

<script>
var myplaylist = [
	{
		sources: [{
			src: '//devnuevo.com/media/video/demo_720.mp4',
			type: 'video/mp4'
		  },{
			src: '//devnuevo.com/media/video/demo_720_480.mp4',
			type: 'video/mp4', label:'480p',res: '480', default: 1
		  },{
			src: '//devnuevo.com/media/video/demo_720_360.mp4',
			type: 'video/mp4', label:'360p',res: '360'
		  },{
			src: '//devnuevo.com/media/video/demo_720_240.mp4',
			type: 'video/mp4', label:'240p',res: '240'
		 }],
		 thumb: '../examples/assets/images/thumbs/demo.jpg',
		 slideImage: '../examples/assets/images/slides/demo_slide.jpg',
		 title: 'Nuevodevel demo video',
		 duration: '02:09'
	}, {
		  sources: [{
			src: '//devnuevo.com/media/video/bmv_720.mp4',
			type: 'video/mp4', label:'720p',res: '720'
		  },{
			src: '//devnuevo.com/media/video/bmv_360.mp4',
			type: 'video/mp4', label:'360p',res: '360', default: 1
		  },{
			src: '//devnuevo.com/media/video/bmv_240.mp4',
			type: 'video/mp4', label:'240p',res: '240'
		  }],
		  thumb: '../examples/assets/images/thumbs/bmv.jpg',
		  slideImage: '../examples/assets/images/slides/bmv_slide.jpg',
		  title: 'BMW M4 - "Ultimate Racetrack"',
		  duration: '01:09'
    }, {
		  sources: [{
			src: '//devnuevo.com/media/video/cymaticjazz_720.mp4',
			type: 'video/mp4',res: '720',label: '720p'
		  }, {
			src: '//devnuevo.com/media/video/cymaticjazz_480.mp4',
			type: 'video/mp4',res: '480',label: '480p'
		  }, {
			src: '//devnuevo.com/media/video/cymaticjazz_360.mp4',
			type: 'video/mp4',res: '360',label: '360p', default: 1
		  },{
			src: '//devnuevo.com/media/video/cymaticjazz_240.mp4',
			type: 'video/mp4',res: '240',label: '240p'
		  }],
		  thumb: '../examples/assets/images/thumbs/cymaticjazz.jpg',
		  slideImage: '../examples/assets/images/slides/cymanticjazz_slide.jpg',
		  title: 'LG Cymatic Jazz',
		  duration: '02:35'
	}, {
		  sources: [{
			src: '//devnuevo.com/media/video/big_buck_720.mp4',
			type: 'video/mp4',res: '720',label: '720p'
		  }, {
			src: '//devnuevo.com/media/video/big_buck_480.mp4',
			type: 'video/mp4',res: '480',label: '480p'
		  }, {
			src: '//devnuevo.com/media/video/big_buck_360.mp4',
			type: 'video/mp4',res: '360',label: '360p', default: 1
		  },{
			src: '//devnuevo.com/media/video/big_buck_240.mp4',
			type: 'video/mp4',res: '240',label: '240p'
		  }],
		  thumb: '../examples/assets/images/thumbs/big_buck.jpg',
		  slideImage: '../examples/assets/images/slides/big_buck_slide.jpg',
		  title: 'Big Buck Bunny',
		  duration: '02:17'
	}
];
</script>

You can insert playlist array directly on your website or load it from external javascript file. Once playlist ready you are fine to setup video element, initialize player, Nuevo plugin and playlist.

Code Source

<!--Setup video element-->
<video id="player_1" class="video-js vjs-fluid" controls preload playsinline webkit-playsinline poster="../examples/assets/images/poster.jpg"></video>

<!--Initialize player with nuevo plugin and your playlist-->
<script>
	var player = videojs('player_1');
	player.nuevo({ 
		//option_1: value
	});
	player.playlist(myplaylist);
</script>

Nuevo plugin includes several options for playlist and playlist UI. See Nuevo plugin setup and options description.

	player.nuevo ({ 
		playlistUI: true,  // set false to hide playlist UI completely
		playlistShow: true, // Set false to hide playlistUI when video player ready to show
		playlistAutoHide: true // Set false to keep playlist UI visible when video starts playing
		playlistNavigation: false // Set true to show playlist Next and Previous arrows
		playlistRepeat: false // Set true to play first media file when last media file ended
	});

You can test playlist options on Nuevodevel playlist demo website

Nuevo playlist features multiple public functions to manage playlist, insert or delete media items programmatically. All functions are described on Nuevodevel playlist SDK demo page.