Nuevo Playlist in separate container

Current Time 0:00

Duration -:-

Loaded: 0%

Stream Type LIVE

Remaining Time -:-

ZOOM HELP

Drag zoomed area using your mouse.

100%

PLAYLIST

Nuevodevel demo video
Multiple mp4 qualities
02:09
BMW M4 - "Ultimate Racetrack"
Drifting on the deck of an aircraft carrier
01:09
LG Cymatic Jazz
Promotional video for LG Electronics!
02:35
Big Buck Bunny
Computer-animated film by the Blender Institute
02:17

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.