Overview
The feature allows for the creation of playlists to show all the 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 it’s optional.
Another option is to add in the “config.plugins” an array that 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 configurabilities 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:
Field | Explanation | Type |
|---|---|---|
thumbnailUrl | Image address you want as the poster for the video | String |
name | A string as the title of the video | String |
userExpand.fullname | A string as the subtitle of the video; usually, it contains the name of the author or owner of the video | String |
duration | The duration of the video in seconds | Number |
Playlist Settings
In settings, you need to add the following:
minWidthWindow
Minimum window width
default: 400px.
If the player’s size falls below this minimum, the playlist will be hidden.
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.
activeIndex
Active index
default: 0
Set the active page index
ratio
Entrie ratio: width/height
default: 1.7.
The ratio of the posters in the playlist.
effect
Animation effect
default: linear.
The effect in which the posters of the playlist move.
speed
Animation speed
default: 70ms.
The speed of the effect of the moving posters in the playlist
delay
Animation delay
default: 0ms.
The delay of the effect before the posters move within the playlist
infinite
infinite playlist
default: value false.
Allows you to move from the first index to the last and from the last to the first
location
Where to place the element of the playlist
default: data.position under the avp-p-gui class.
Insert the name of the class you want to locate the playlist
hoveringPlaylist
When hover on the player the playlist will be show
default: true.
When this value is false the playlist will be shown when the pause button is pressed
upNext
Shows the next content and the time it will start in
default: value true
upNextTimeOut
The time in seconds before the current video ends
default: 5 seconds.
showAlways
An option to make the playlist always appears
default: false
customCss
An option to custom the css of any class
locateBelow
Place the playlist below the player: default false.
hoveringAndPause
Showing the playlist in pause and when hover on the player
default: false.
showEntryTitles
Showing all the titles of the entries without dissolving
default: for mobile is true and for desktop is false.
moreVideosText
Ability to configure the "more videos" text
default: “more videos”.
upNextText
Ability to configure the "up next" text
default: “up next”.
numOfVideosRequest
Ability to configure the number of videos per index in the playlist regardless the size of the player.
default: the number of the playlist changes in relation to the player size.
showFullUpNext
Ability to show the full title (up until 75% of the player width) of the next video: default: true.
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.
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.
ratioPlayer
Duplicate the player ratio (width / height) and Implement it on the playlist items, and set the ratio between the player and the playlist item to a predefined sizes (also configurable arguments) with consideration to the player size itself.
default:
smallCoefficient 0.2
mediumCoefficient 0.2047619048
largeCoefficient 0.2047619048
isMoreVideos
If false remove the more video text and the counting of seconds
default: true
arrowsColor
Color of the playlist’s arrows
default: #f5f5f5
playlist example