Videojs playlist test

The playlist can be included in any other separate container, e.g., under the player.
Demo HERE

Nuevo plugin includes built-in unique option to show and play a playlist of videos. This is the most attractive and the most advanced playlist, not just for the videojs player but for any player as well. The playlist layout differs from playlists offered by other players or Videojs playlist plugin. It expands from the right side of the player and automatically hides during video playback. There are several layout options that you can use. You can hide the playlist container completely and show only playlist navigation arrows to play the next or previous video from the list; you can order not to hide the playlist while the video is playing; you can display the playlist in a separate container.The Nuevo playlist is advanced enough to handle various video formats, including standard MP4 in multiple different resolutions, HLS/m3u8, HLS/fragmented MP4, MPEG/DASH, audio, or even live streaming video.
Videos from the playlist are played in auto-advance mode. One of the useful playlist functions is to enable the repeat option. This will force the player to restart playback from the initial playlist item after the final video concludes. If one of the videos from the playlist throws a media error (not supported, not connecting), the playlist will continue playback from the next item seamlessly.

Example player and video playlist setup.

Code snippet

// Load player skin css stylesheet inside <head> section of your webite
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" controls preload="auto" width="640" height="360" poster="//www.domain.com/poster.jpg"></video>


<script>
// Prepare a playlist of media items
const myplaylist = [
{
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'
}, {
sources: [{src: 'http://domain.com/playlist.m3u8', type: 'application/x-mpegURL'}],
title: 'video 2 title',
thumb: 'http://domain.com/video4_thumb.jpg',
track:{kind: "metadata" ,src: "//domain.com/progressthumbs.vtt"},
duration: '03:40'
}
];
const player=videojs("video_1", {license: "key"} );
player.nuevo()
player.playlist(myplaylist)
</script>

As it was mentioned above, the playlist features several possible settings. Playlist settings are available to configure through the player or nuevo plugin.

Code snippet

player.nuevo({
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
});

Since version 13 of the Nuevo plugin the user can assign an unique identifier to the playlist to remember the last playlist item that was played.

Code snippet

player.uniquePlaylist="unique_identifier";
player.playlist(myplaylist)

It is possible to start playlist playback from other than first playlist item, e.g. to start from 3rd item:

Code snippet

player.playlist(myplaylist, 3)

Public functions available to interact with the playlist

There are several functions that you can use to control playlist programmatically on the run.
The available functions were described and tested on Playlist SDK demo page.