...
| Table of Contents | ||
|---|---|---|
|
Internal
Overview
The feature allows for the creation of playlists a playlist 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 While the data and the player are mandatory arguments, the settings argument has default settings and it’s is optional.
Another option is to add an array in the “config.plugins” an array that , 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 configurabilities configuration settings of the playlist.
Json JSON example:
"plugins": [
{
...
}
}],
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 Entry 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 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
hoveringPlaylist
When hover on hovering over the player the playlist will be show shown
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 CSS of any class
locateBelow
Place the playlist below the player: default false.
hoveringAndPause
Showing the playlist in pause and when hover on hovering over 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 of 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 . Set the ratio between the player and the playlist item to a predefined sizes (also configurable arguments) with consideration to of 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
...
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.)
As we currently don’t transcode from DASH (nor to DASH) format
meta-data only - this is also not supported yet, but may be in the future.
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
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.
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.
- 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:
...