Videojs playlist test

Video Player is loading.

PLAYLIST

Wild Animals are everywhere, every country every land
03:04
BMW M4 - "Ultimate Racetrack"
01:09
Nexus Demo (MPEG-Dash)
04:02
Fitness keeps you younger and healthy
01:33
Big Buck Bunny
02:17
Blender HLS/Fragmented MP4
07:44
Serenity Movie Trailer
02:13
LG Cymatic Jazz
02:35

Current Time 0:00

Duration -:-

Loaded: 0%

Stream Type LIVE

Remaining Time -:-

ZOOM HELP

Drag zoomed area using your mouse.

100%

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. Nuevo playlist differs in layout from playlists offered by other players or other videojs plugins. By default, before video playback, the playlist is visible; however, you can order to hide it and show only the playlist icon. You can even hide the playlist container completely and show only playlist navigation arrows to play the next or previous video from the list.

The Nuevo playlist is advanced enough to support multiple video formats, including standard MP4 in multiple resolutions, HLS/m3u8, HLS/fragmented MP4, mpeg/DASH, audio, or even live video.
Videos from the playlist are played in auto-advance mode. One of the useful playlist functions is to set the repeat option. This will force the player to restart playback from the first playlist item once the last video is finished. If one of the videos from the playlist throws a media error (not supported, not connecting), the playlist will play the next video from the playlist 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
var 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'
}
];
var 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.