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.

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
  • poster
  • contentTitle
  • contentDescription

All items within the playlist must have the same bitrates type information (e.g. if you use HLS bitrates for each item must be HLS, if you use MP4 progressive download bitrates for each item must be MP4 progressive download ...)

An optional field for each item is:

  • adTagUrl - if you use ads you must also set the player setting ads to true
{
  "playlist": [
    {
      "bitrates": {
        "hls": "https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8"
      },
      "poster": "https://www.radiantmediaplayer.com/media/playlist/poster/item-1.jpg",
      "adTagUrl": "https://www.radiantmediaplayer.com/vast/tags/inline.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",
      "adTagUrl": "https://www.radiantmediaplayer.com/vast/tags/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",
      "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"
    }
  ]
}

Another example of JSON playlist with MP4 progressive download & ads can be found here. Note that this last example works for both related content and playlist layouts.


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.


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/v4/latest/js/rmp.min.js"></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,
  playlistLoc: 'https://www.radiantmediaplayer.com/media/playlist/playlist.json'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

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.


Unsupported features

The following features are not supported with the playlist UI:

  • Google cast
  • Google analytics
  • Custom ad scheduler
  • Ad-waterfalling through the adTagWaterfall setting
  • VMAP adTag
  • loop setting
  • audio-only
  • Closed captions through the ccFiles setting
  • Only the 's1' skin is currently available for playlist. Skin colorization is supported and CSS source files for the playlist UI are also provided.