Radiant Media Player

Playlist support




Features

Radiant Media Player playlist layout allows for a collection of video items to be displayed with an easy-to-use UI. Playlist items are displayed on a scroll-able side panel and in-player arrows also permit navigation between playlist items.

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.

Similar to related content playlist items data are stored in a JSON file that is retrieved and parsed by the player at run time. See below for information about how to construct this JSON file.


Playlist data in JSON format

Here is a full example of well-formatted JSON file that can be used with Radiant Media Player to display a playlist of video items.

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

  • bitrates - streaming URL 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 bitrates type information (e.g. if you use HLS - each playlist item must have a HLS URL in its bitrates information; if you use MP4 progressive download - each playlist item must have a MP4 URL in its bitrates information)

Optional fields for each playlist item are:

  • adTagUrl - the URL 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
  • thumbnail (highly recommended) - thumbnail frame for the playlist item (size should be 80x45) - if thumbnail information is not found poster data will be used
{
  "playlist": [
    {
      "bitrates": {
        "hls": "https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8"
      },
      "poster": "https://www.radiantmediaplayer.com/media/playlist/poster/item-1.jpg",
      "thumbnail": "https://www.radiantmediaplayer.com/media/playlist/poster/item-1-thumbnail.jpg",
      "adTagUrl": "https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml",
      "contentTitle": "Playlist Item 1",
      "contentDescription": "Description for playlist item 1"
    },
    {
      "bitrates": {
        "hls": "https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:ed.smil/playlist.m3u8"
      },
      "poster": "https://www.radiantmediaplayer.com/media/playlist/poster/item-2.jpg",
      "thumbnail": "https://www.radiantmediaplayer.com/media/playlist/poster/item-2-thumbnail.jpg",
      "adTagUrl": "https://www.radiantmediaplayer.com/vast/tags/inline-linear-skippable.xml",
      "contentTitle": "Playlist Item 2",
      "contentDescription": "Description for playlist item 2"
    },
    {
      "bitrates": {
        "hls": "https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb-long.smil/playlist.m3u8"
      },
      "poster": "https://www.radiantmediaplayer.com/media/playlist/poster/item-3.jpg",
      "thumbnail": "https://www.radiantmediaplayer.com/media/playlist/poster/item-3-thumbnail.jpg",
      "adTagUrl": "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=",
      "contentTitle": "Playlist Item 3",
      "contentDescription": "Description for playlist item 3"
    }
  ]
}

Player settings

playlistLoc: String

This set the path to the JSON file that hold information about the playlist. This must be a fully qualified URL. This file is retrieved through ajax by the player so proper CORS setting are expected.

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.


Player code example

The below code is used to display the playlist example at top of this page:

Take note of the additional div elements required to display the playlist UI.

<script src="https://cdn.radiantmediatechs.com/rmp/4.4.19/js/rmp.min.js" 
  integrity="sha384-MHxuw6s8n+Uh8xT1LYC0zcidvLkX9DN0otZPYoamhjIU8svCQARWXpRYEXV6o6LI"
  crossorigin="anonymous"></script>
<!-- Here is our specific markup for playlist -->
<div class="rmp-playlist-container">
  <div class="rmp-playlist-player-wrapper">
    <div id="rmpPlayer"></div>
  </div>
</div>
<script>
var settings = {
  licenseKey: 'your-license-key',
  delayToFade: 3000,
  // if you want ads to show uncomment this next setting
  // ads: true,
  // our playlist settings
  playlistUpNextAutoplay: true,
  playlistEndedLoop: false,
  playlistLoc: 'https://www.radiantmediaplayer.com/media/playlist/playlist.json'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Playlist API

getCurrentPlaylistItemIndex()
rmp.getCurrentPlaylistItemIndex();

This getter returns a Number representing the index of the current playlist item being displayed. Index starts at 0. null is returned if this value is not available.

setPlaylistItem(index)
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.

isPlaylist()
rmp.isPlaylist();

This method returns a boolean stating if the player is used with a playlist layout. null is returned if this value is not available.

getPlaylistData()
rmp.getPlaylistData();

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

{
  adTagUrl: "https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml",
  bitrates: { 
    hls : "https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8"
  },
  contentDescription: "Description for playlist item 1",
  contentTitle: "Playlist Item 1",
  poster: "https://www.radiantmediaplayer.com/media/playlist/poster/item-1.jpg",
  thumbnail: "https://www.radiantmediaplayer.com/media/playlist/poster/item-1-thumbnail.jpg"
}

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.


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.


Unsupported features

The following features are not supported with the playlist UI:

  • Ad scheduler
  • Ad-waterfalling through the adTagWaterfall setting (other VAST-related waterfalling mechanism are supported)
  • Audio-only
  • Closed captions through the ccFiles setting (embedded captions in HLS or DASH streams are supported)
  • Only the 's1' and 's2' skins are available for our playlist layout. Skin colorization is supported and CSS source files for the playlist UI are also provided.
  • Flash fallback (deprecated) is not available with playlist layout
  • 360 video content
  • DVR content