Demo HERENuevo 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 or other videojs plugins.
It is overlaid on player with the option to show/hide while playing video. It is safe to show even on narrow browser on a 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 the player to restart playback from first playlist item once the last video finished.
If one video/audio from the playlist throws a media error (not supported, not connecting), the playlist will play next video from the playlist seamlessly.
The videos from playlist are fully supported by Chromecast plugin.
// Load player skin css stylesheet inside <head> section of your webitehref="//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 websitevideo id="video_1" class="video-js vjs-fluid" controls preload="auto" width="640" height="360" poster="//www.domain.com/poster.jpg"></video>
// Initialize player, nuevo plugin with playlist options<script>var player=videojs("video_1");player.nuevo({playlistUI: false, // set to disable playlist UI completelyplaylistShow: false, // set to hide playlist UI on startplaylistAutoHide: false, // Disable playlist UI autohide on video play eventplaylistNavigation: true , // set to show playlist navigation arrowsplaylistRepeat: false, // set to repeat playlist playback});// Setup playlist media filesplayer.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 pxduration: '03:40'}, {// Multiple resolutions mp4 videosources: [{src: '//domain.com/video2_720p.mp4',type: 'video/mp4', res: '720', label: '720p'}, {src: '//domain.com/video2_360p.mp4',type: 'video/mp4', res: '360', label: '360p', default }, {src: '//domain.com/video2_240p.mp4',type: 'video/mp4', res: '240', label: '240p'}],tracks: [{src: '//domain.com/captions_en.vtt',kind: 'captions', srclang:"en", label:"English", default:true} , {src: '//domain.com/captions_de.vtt',kind: 'captions', srclang:"de", label:"German"} , {src: '//domain.com/captions_es.vtt',kind: 'captions', srclang:"es", label:"Spanish"}],title: 'video 2 title',thumb: 'http://domain.com/video2_thumb.jpg', // Suggested size 80x45 pxduration: '05:20',slideImage: 'http://domain.com/video2_slide.jpg', // Optional progressbar thumbs slide image}, {// HLS m3u8 playlist filesources: [{src: 'http://domain.com/playlist.m3u8',type: 'application/x-mpegURL'}],title: 'video 3 title',thumb: 'http://domain.com/video4_thumb.jpg',track:{kind: "chapters" ,src: "//domain.com/chapters.vtt" ,label: "Chapters", srclang: "en"},duration: '03:40'}]);</script>Public functions available to interact with the playlist
There are several functions that you can use to control playlist programmatically on the run.
All described and tested Playlist SDK demo page.