Nuevo Playlist in separate container

Since version 9 of the Nuevo plugin it is possible to include Nuevo playlist into any separate container, for example under player. You only need to provide playlist container's ID and optionally playlist's height (pixels).

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',
		 description: "Multiple mp4 qualities",
		 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"',
		  description: "Drifting on the deck of an aircraft carrier",
		  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',
		  description: "Promotional video for LG Electronics!",
		  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',
		  description: "Computer-animated film by the Blender Institute",
		  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>
<div id="playlist"></div>

<!--Initialize player with nuevo plugin and your playlist-->
<script>
	var player = videojs('player_1');
	player.nuevo({ 
		playlistID: "playlist", playlistMaxH:200
	});
	player.playlist(myplaylist);
</script>

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.