Radiant Media Player

Related content support

Related documentation sections


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 TV show. Ten seconds before the completion of a video item, an "up next" panel in the bottom left corner of the player 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. A built-in error-recovery mechanism is also provided to skip related items that may be unavailable.

The related module is compatible with most player features including HLS & DASH streaming and a dedicated related API exists to programmatically control the related layout. With Radiant Media Player 4.5.9+ the related module is fully compatible with Google Cast and AirPlay allowing for a top-nocth second-screen viewing experience of multiple media items.

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 follows. The required fields for each related item are:

  • bitrates: (Object) streaming URI for the related item
  • poster: (String) poster frame for the related item - size should be equal to the initial player size (832x468 for the example above)
  • contentTitle: (String) title for the related item
  • contentDescription: (String) description for the playlist item - while this information is not displayed within the related UI it is useful for accessibility and ad-targeting purposes

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

Optional fields for each related item are:

  • adTagUrl: (String) URI to the adTag to be loaded when the related item starts - if you use ads you must also set the player setting ads to true
  • thumbnail: (String) thumbnail frame for the related item (size should be 332x186) - if thumbnail information is not found poster data will be used
  • contentDuration: (String) duration for the related item - expressed as hh:mm:ss
  • related: (String) URI to a new related JSON specific to current related item

The related content layout was designed to display 16:9 content. Video content, poster, thumbnail and player size should be at a 16:9 ratio for best results. Other ratio may work but you may need to adjust player CSS to best fit your custom ratio.


  "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-related.jpg",
      "adTagUrl": "https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml",
      "contentTitle": "Related Item 1",
      "contentDuration": "01:51",
      "contentDescription": "Description for related item 1",
      "related": "https://www.radiantmediaplayer.com/media/playlist/related-1.json"
      "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-related.jpg",
      "adTagUrl": "https://www.radiantmediaplayer.com/vast/tags/inline-linear-skippable.xml",
      "contentTitle": "Related Item 2",
      "contentDuration": "10:53",
      "contentDescription": "Description for related item 2",
      "related": "https://www.radiantmediaplayer.com/media/playlist/related-2.json"
      "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-related.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": "Related Item 3",
      "contentDuration": "09:56",
      "contentDescription": "Description for related item 3",
      "related": "https://www.radiantmediaplayer.com/media/playlist/related-3.json"

Another example of JSON related with MP4 progressive download can be found here.

Player settings

relatedLoc: String

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

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).

relatedEndedLoop: Boolean

By default when the last item of the related playlist ends the player stops and shows the discovery overlay menu. When relatedEndedLoop is set to true and the last item of the related playlist ends the player will automatically start loading and displaying the first item in the related playlist (e.g. playlist loop). Default: false. When relatedEndedLoop is set to true relatedUpNextAutoplay must also be set to true to have effect.

Player code example

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

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


This getter returns (Number|null) representing the index of the current related item being displayed. Index starts at 0.


This method sets the current related item being displayed. index input parameter should be a number representing the desired related item to be displayed.


This method returns (Boolean|null) stating if the player is used with a related layout.


This method returns (ordered Array of Object|null) where each Object represents a related item. Example of Object related item:

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

This method returns (String|null) representing the URI to the currently loaded JSON related.

Additional support notes

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 consideration

Each time a new item starts in the related layout a player start is counted (PLATFORM Edition and Google Analytics).

Unsupported features with the playlist layout:

  • Ad scheduler
  • Ad-waterfalling through the adTagWaterfall setting (other VAST-related waterfalling mechanism are supported)
  • Closed captions through the ccFiles setting (embedded captions in HLS or DASH streams are supported)
  • 360 video content
  • DVR content will be treated as simple live content
  • DRM content
  • Audio-only
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.