Open

Internal

Overview

The feature allows for the creation of a playlist to show different content videos with the exception of the one video currently playing.

Playlist build

In playlist() there are 3 arguments in the following order: data, player, and settings.

While the data and the player are mandatory arguments, the settings argument has default settings and is optional.  

Another option is to add an array in the “config.plugins”, where one of its objects is:

"name": "Playlist", then “config” object with “src”: "https://player.avplayer.com/script/2/<latest version>/plugins/videoPlayListGallery.js", then object “settings” with all the configuration settings of the playlist.

JSON example:

"plugins": [

                {

                    "name": "Playlist",

                    "config": {

                        "src": "https://player.avplayer.com/script/2/<latest version>/plugins/                       videoPlayListGallery.js",

                        "settings": {

                            "showEntryTitles": true,

                            "infinite": false,

                            "hovringAndPause": true

                        }

                    }

                }],

Playlist Data

In data, you need to add under the path data.content.contents[i].entry the following:

Playlist Settings

In settings, you need to add the following:

1. minWidthWindow

Minimum window width

default: 400px.

If the player’s size falls below this minimum, the playlist will be hidden.

1. minGuiShow

Minimum gui show 

default: 600px.

If the player’s size falls below this minimum, the default buttons (shown in the center of the player) will be hidden.

1. activeIndex

Active index

default: 0

Set the active page index

1. ratio

Entry ratio: width/height 

default: 1.7.

The ratio of the posters in the playlist.

1. effect

Animation effect 

default: linear.

The effect in which the posters of the playlist move.

1. speed

Animation speed 

default: 70ms.

The speed of the effect of the moving posters in the playlist

1. delay

Animation delay 

default: 0ms.

The delay of the effect before the posters move within the playlist

1. infinite

infinite playlist

default: value false.

Allows you to move from the first index to the last and from the last to the first

1. location

Where to place the elements of the playlist 

default: data.position under the avp-p-gui class. 

Insert the name of the class you want to locate the playlist

1. hoveringPlaylist

When hovering over the player the playlist will be shown 

default: true. 

When this value is false the playlist will be shown when the pause button is pressed

1. upNext

Shows the next content and the time it will start in 

default: value true 

Open

1. upNextTimeOut

The time in seconds before the current video ends 

default: 5 seconds. 

1. showAlways

An option to make the playlist always appears 

default: false 

1. customCss

An option to custom the CSS of any class

1. locateBelow

Place the playlist below the player: default false.

1. hoveringAndPause

Showing the playlist in pause and when hovering over the player 

default: false.

1. showEntryTitles

Showing all the titles of the entries without dissolving 

default: for mobile is true and for desktop is false.

1. moreVideosText

Ability to configure the "more videos" text 

default: “more videos”.

1. upNextText

Ability to configure the "up next" text 

default: “up next”.

1. numOfVideosRequest

Ability to configure the number of videos per index in the playlist regardless of the size of the player.

default: the number of the playlist changes in relation to the player size.

1. showFullUpNext

Ability to show the full title (up until 75% of the player width) of the next video: default: true.

1. itemWidth

Set the video items width as you wish however must configure the itemHeight as well.

default: set automatically from the player width and ratio.

1. itemHeight

Set the video items height as you wish however must configure the itemWidth as well.

default: set automatically from the player width and ratio.

1. ratioPlayer

Duplicate the player ratio (width/height) and Implement it on the playlist items. Set the ratio between the player and the playlist item to predefined sizes (also configurable arguments) with consideration of the player size itself.

default: 

• smallCoefficient 0.2 

• mediumCoefficient 0.2047619048

• largeCoefficient 0.2047619048

1. isMoreVideos

If false remove the more video text and the counting of seconds 

default: true

1. arrowsColor

Color of the playlist’s arrows

default: #f5f5f5 

playlist example

http://play.aniview.com/clients/playlist.html

External CMS setting for HLS/M3U8

When Customers are using their CDN and want to feed the player directly with the DASH/HLS stream, we need to remember below (This may change in the Future.)

1. As we currently don’t transcode from DASH (nor to DASH) format

2. meta-data only - this is also not supported yet, but may be in the future.

3. Another option to configure the player to use external video links, without even importing the meta-data, So there is no CMS intervention.

Recently we encountered a situation where we had an issue with Cloudflare, HLS file.

Cloudflare

1. In the publisher website, they first need to remove the embeded code that is embedding CMS-id and cms-type on the DOM element, so we can make changes in the backend.

2. We need to check, how Cloudflare uses CORS. Accordingly, we need to add the query parameter in the HLS content. In one user case, the CORS error was access control.

1. Example of Query Parameter
   {
   "content": {
   "contents": [
   {
   "url": "https://customer-l1etlhbrwpbtmvdz.cloudflarestream.com/510f9d03f67c74a6cec295449fe4ce4b/manifest/video.m3u8?parentOrigin=https%3A%2F%2Fwpenginepowered.com",
   "entry": {
   "name": "1"
   }
   }
   ]
   }
   }

We can add the Query Parameter like this in the player tag: