Radiant Media Player

Related content support




Features

The related content module allows for multiple video items to play, one after another, with no delay in between. This approach is ideal for content that should be viewed in a particular order, such as episodes in a show. Ten seconds before the completion of a video item, an "up next" panel in the bottom left corner will show, clearly identifying the next video item to be played.

Viewers can either use a next button in the control bar to skip the current video item or use the related module in the top-right corner to display an overlay element which will present the wall of related video items. See above for an example.

Video ads can be played each time a new video item is loaded within the player. The related UI is fully compatible with mobile devices.

Related video 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.


Related content data in JSON format

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

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

  • bitrates
  • poster
  • contentTitle

All items within the related 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 ...)

Optional fields for each item are:

  • adTagUrl - if you use ads you must also set the player setting ads to true
  • contentDuration
{
  "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": "Video Item 1",
      "contentDuration": "01:51"
    },
    {
      "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": "Video Item 2",
      "contentDuration": "10:53"
    },
    {
      "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": "Video Item 3",
      "contentDuration": "09:56"
    }  
  ]
}

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


Player settings

relatedLoc: String

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

relatedUpNextOffset: Number

The time to end of content (in seconds) before the "up next" panel is shown to the viewer. Default: 10.

relatedUpNextAutoplay: Boolean

By default when a video item ends in the related playlist the next item is automatically played. Default: true. Setting this setting to false will cause the related engine to display the wall of related video item when the current video item ends (e.g. it will not autoplay next item).


Player code example

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

<script src="https://cdn.radiantmediatechs.com/rmp/v4/latest/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
var settings = {
  licenseKey: 'your-license-key',
  delayToFade: 3000,
  width: 800,
  height: 450,
  // if you want ads to show uncomment this next setting
  // ads: true,
  // our related settings
  relatedUpNextOffset: 10,
  relatedUpNextAutoplay: true,
  relatedLoc: 'https://www.radiantmediaplayer.com/media/playlist/related.json'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Additional support notes

The following features are not supported with the related UI:

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