HPlayer: playlist

For Bigger Blazes

HBO GO now works with Chromecast -- the easiest way to enjoy online video on your TV. For when you want to settle into your Iron Throne to watch the latest episodes. For $35.\nLearn how to use Chromecast with HBO GO and more at google.com/chromecast.

Elephant Dream

The first Blender Open Movie from 2006

For Bigger Meltdowns

Introducing Chromecast. The easiest way to enjoy online video and music on your TV—for when you want to make Buster's big meltdowns even bigger. For $35. Learn how to use Chromecast with Netflix and more at google.com/chromecast

For Bigger Escape

Introducing Chromecast. The easiest way to enjoy online video and music on your TV—for when Batman's escapes aren't quite big enough. For $35. Learn how to use Chromecast with Google Play Movies and more at google.com/chromecast.

For Bigger Joyrides

Introducing Chromecast. The easiest way to enjoy online video and music on your TV—for the times that call for bigger joyrides. For $35. Learn how to use Chromecast with YouTube and more at google.com/chromecast.

For Bigger Fun

Introducing Chromecast. The easiest way to enjoy online video and music on your TV. For $35. Find out more at google.com/chromecast.

Playing next video in ...

Elephant Dream

It plays the next video automatically from playlist.
User can open and close the playlist using notification icon.
Always highlights the current video playing in the player.
User can select and play the video from the playlist.
On set loop equals to true it will start over the video playback.
You can also add the chapter’s data configuration for each video in the playlist. if you have already enabled the chapter feature. If not, then while configuring the player, you must enable the chapters_vod feature to display a chapter’s.
If no chapter’s data configured for a particular video the chapters will be removed.

Specific Playlist Settings

Now playlist feature provides a flexible way to use the playlist UI.
It has two UI one with playlist and other with next video popup dialog with play/stop buttons.
- If you want to show/hide playlist on the UI set withPlaylist to true/false in the player configuration.
- If you want to show/hide next video popup dialog set withNextVideoPopup to true/false in the player configuration.
- You can also use both UI at the same time by setting it to true.
- If both playlist and next video popup dialog is set to false it will continue to play the video till the last video in the playlist.

How to configure and enable this feature

const options =
  {
    advanced_features: [
      {
        name: 'playlist',
        visible: true,
        data: {
            withPlaylist: true,
            withNextVideoPopup: true,
            loop: false,
            auto_second: 10,
            videos: [
              {
                title: 'YOUR TITLE 1',
                description: 'YOUR DESCRIPTION 1',
                source: 'https://sample/ForBiggerBlazes.mp4',
                thumbnail: 'https://images/ForBiggerBlazes.jpg',
                thumbnailOnHover: 'https://i.imgur.com/71.gif',
                chaptersData: {
                    url: 'https://hplayer-demo.netlify.app/assets/text-track-en.vtt',
                    lang: 'en'
                }
              },
              {
                title: 'YOUR TITLE 2',
                description: 'YOUR DESCRIPTION 2',
                source: 'https://sample/ForBiggerBlazes.mp4',
                thumbnail: 'https://images/ForBiggerBlazes.jpg',
                thumbnailOnHover: 'https://i.imgur.com/71.gif',
                chaptersData: {
                    url: 'https://hplayer-demo.netlify.app/assets/text-track-en.vtt',
                    lang: 'en'
                }
              }
            ]
        }
      }]
  }

Data property

Table 1. Playlist data property
Property	Value	Description
withNextVideoPopup	Boolean	To display the next video popup dialog. if false then it will hide the next video popup dialog.
videos	Array[]	An array of video playlist with pre-defined format to display the playlist.
loop	Boolean	To start over the video when the playlist playback ends.
auto_second	number	Declare seconds to hold the next video popup to play the next video.
withPlaylist	Boolean	To display the playlist on the UI. if false then it will hide the playlist.

videos parameter properties

Table 2. videos array properties
Property	Value	Description
thumbnailOnHover	string	Thumbnail to played on hover
title	string	Title of the player.
description	string	Description or any other info about the video.
source	string	url of the video.
thumbnail	string	Thumbnail to be display in the video playlist.

CSS Customization

To customise the css of the playlist you can edit the following class showed below with your own preferred css.

Snippet

.playlist-dialog-container {
  // add your css customization here.
}
.playlist-video-card {
  // add your css customization here.
}

.playlist-video-title {
  // add your css customization here.
}

.playlist-video-desc {
  // add your css customization here.
}

.player-notification-button {
  // add your css customization here.
}