Documentation sections

Features

Radiant Media Player playlist layout allows for a collection of video items to be displayed with an intuitive, mobile-ready UI. Playlist items are displayed on a scroll-able side panel and in-player arrows allow navigation between playlist items.
We also support
audio playlist.

Video ads can be played each time a new playlist item is loaded within the player. The playlist UI is fully compatible with mobile devices. A built-in error-recovery mechanism is also provided to skip playlist items that may be unavailable.

The playlist layout is compatible with most player features including HLS &AMP; DASH streaming, Google Analytics and a dedicated playlist API exists to programmatically control the playlist layout. Our playlist layout is compatible with Google
Cast and AirPlay.

Playlist data set with a JSON file

The playlist player can be initialised by passing through the playlistLoc setting a URI to a JSON file holding playlist data. Here is a full example of
well-formatted JSON file that can be used with Radiant Media Player playlist layout.

The general structure is as below. The required fields for each item are:

src - streaming source for the playlist item

poster - poster frame for the playlist item - size should be 832x468

contentTitle - title for the playlist item

contentDescription - description for the playlist item

All items within the playlist must have the same src type (e.g. if you use HLS - each playlist item must have a HLS URI in its src information; if
you use MP4 progressive download - each playlist item must have a MP4 URI in its src information)

Optional fields for each playlist item are:

thumbnail (highly recommended) - URI to thumbnail frame for the playlist item (size should be 80x45) - if thumbnail information is not found poster data will be used

adTagUrl - URI to the adTag to be loaded when the playlist item starts - if you use ads you must also set the player setting ads to true

adTagWaterfall - an array of URI to be used for client-side waterfalling -
see here for more information

Playlist data set with a JavaScript array of objects

Alternatively to passing playlist data as a JSON file you can pass those data through the
playlistData setting as an array of objects. Each item of the array is an object representing a playlist item. The structure of this object follows the same pattern as the one described in the JSON file section above. Example:

Playlist settings

playlistLoc: String

This set the location to the JSON file that hold information about the playlist. It can either be a fully qualified URL or a local/absolute path. Note that the playlist JSON file is loaded with XMLHttpRequest and thus it must be delivered with
proper CORS setting for cross-site requests. Default: ''.

playlistData: Array

This setting sets the initial playlist data based on an JavaScript array of objects. Default: []. If both playlistLoc and playlistData are set
playlistData will prevail. See above for an example. Default: [].

playlistUpNextAutoplay: Boolean

By default when a playlist item ends the next playlist item is automatically played. Default: true. Setting this setting to false will cause the player to not autoplay the next item.

playlistEndedLoop: Boolean

By default when the last item of the playlist ends the player stops and remains on the last item. When playlistEndedLoop is set to true and the last item of the playlist ends the player will automatically start loading and displaying
the first item in the playlist (e.g. playlist loop). Default: false. When
playlistEndedLoop is set to true playlistUpNextAutoplay must also be set to true to have effect.

Playlist API

getCurrentPlaylistItemIndex()

This getter returns a Number representing the index of the current playlist item being displayed. Index starts at 0.

setPlaylistItem(index) asynchronous

rmp.setPlaylistItem(1);

This method sets the current playlist item being displayed.
index input parameter should be a number representing the desired playlist item to be displayed. srcchanged or
error event will fire when this method has completed (see setSrcAPI docs for more information).

isPlaylist()

rmp.isPlaylist();

This method returns a boolean stating if the player is used with a playlist layout.

getPlaylistData()

rmp.getPlaylistData();

This method returns an ordered Array of Object where each Object represents a playlist item. Example of Object playlist item:

setPlaylistData(playlistLoc|playlistData) asynchronous

This method allows to dynamically update the playlist player with a new set of data. You can either pass a URI to new JSON file (see playlistLoc setting) or a new array of object (see
playlistData setting). srcchanged or
error event will fire when this method has completed (see setSrcAPI docs for more information).

Additional support notes

Sizing considerations

The playlist UI uses media queries to adjust itself based on viewport dimensions. It is meant to be a central element within a web page. Review the playlist.less Less CSS file from within the self-hosted package for further sizing information
and customisation.

Live content

You can use live content with the playlist layout (use isLive: true setting) but all items from the playlist must be live content.

Logging &AMP; billing considerations

Each time a new item starts in the playlist layout, a player start is counted (PLATFORM Edition).

Analytics consideration

Each time a new item starts in the playlist layout, a playerstart event is sent to Google Analytics, but it will use as label the contentTitle of the new item. This allows to identify when a specific playlist item is started. Other events, like
adimpression or enterfullscreen, will also be sent to Google Analytics when a new media item starts in the playlist layout, but with the updated label as well.

Unsupported features with the playlist layout:

Ad scheduler

Audio-only

Closed captions through the ccFiles setting (embedded captions in HLS or DASH streams are supported)