Nuevo playlist for Videojs test

Nuevo playlist for videojs

Nuevo plugin includes built in unique option to show and play a playlist of videos.
Nuevo playlist differs in layout from playlists offered by other players. Usually playlist is presented as separate HTML container positioned on right side of player or below. However this often doesn't look good on every browser and device.
Nuevo playlist is overlayed on player with option to show/hide while playing video. It is safe to show even on narrow browser on mobile device in portrait mode.
By default before video playback the playlist is visible, however you can order to hide it and show only playlist icon. You can even hide playlist container completely and show only playlist navigation arrows to play next or previous video from the list.

Nuevo playlist is also enough advanced to support multiple video formats like standard MP4 in multiple resolutions, HLS/m3u8, HLS/fragmented MP4, mpeg/DASH or even Live stream.
Videos from the playlist are played in auto-advance mode. One of useful playlist functions is to set "repeat" option. This will force player to restart playback from first playlist item once last video finished.

Example player and video playlist setup.

	
	// Load player skin css stylesheet inside <head> section of your webite

	<link href="//www.domain.com/videojs/css/videojs.min.css" rel="stylesheet">

	// Load videojs and nuevo plugin javascript files on website

	<script src="//www.domain.com/videojs/video.min.js"></script>
	<script src="//www.domain.com/videojs/nuevo.min.js"></script>

	// Setup video element on website

	<video id="video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" width="640" height="360" poster="//www.domain.com/poster.jpg">

	// Initialize player, nuevo plugin with playlist options

	<script>
	var player=videojs("video_1");
	player.nuevo({ // plugin options here 
	   playlistUI: false, // set to disable playlist UI completely
	   playlistShow: false, // set to hide playlist UI on start
	   playlistAutoHide: false, // Disable playlist UI autohide on video play event
	   playlistNavigation: true , // set to show playlist navigation arrows
	   playlistRepeat: false, // set to repeat playlist playback
	});
	</script>

	// Setup playlist media files

	player.playlist([{
	  sources: [{
	    src: 'http://domain.com/video1.mp4',
	    type: 'video/mp4'
	  }],
	  title: 'video 1 title',
	  thumb: 'http://domain.com/video1_thumb.jpg', // Suggested size 80x45 px
	  duration: '03:40',
	}, {
	  // Multiple resolutions mp4 video
	  sources: [{
	    src: 'http://domain.com/video2_720p.mp4',
	    type: 'video/mp4', res: '720', label: '720p'
	  }, {
	    src: 'http://domain.com/video2_360p.mp4',
	    type: 'video/mp4', res: '360', label: '360p', default
	  }, {
	    src: 'http://domain.com/video2_240p.mp4',
	    type: 'video/mp4', res: '240', label: '240p'
	  }],
	  title: 'video 2 title',
	  thumb: 'http://domain.com/video2_thumb.jpg', // Suggested size 80x45 px
	  duration: '05:20',
	  slideImage: 'http://domain.com/video2_slide.jpg', // Optional progressbar thumbs slide image
	}, {
	  // HLS m3u8 playlist file
	  sources: [{
	    src: 'http://domain.com/playlist.m3u8',
	    type: 'application/x-mpegURL'
	  }],
	  title: 'video 3 title',
	  thumb: 'http://domain.com/video4_thumb.jpg',
	  duration: '03:40',
	}
	]);
	</script>