Radiant Media Player

In-player playlist




Scope of support

HTML5

This feature has been added with Radiant Media Player version 3.3.0

The in-player playlist layout for Radiant Media Player provides a minimalist yet complete playlist interface within Radiant Media Player HTML5 player.

Supported features

  • Intuitive playlist navigation menu
  • Mobile-ready and responsive layout
  • On-demand video with HLS or MP4 streaming
  • Playback-rate, sharing module & custom logo support
  • Video ads with dedicated adTag slot for each playlist item
  • AutoNext feature (configurable)
  • Smooth fullscreen transition of content
  • Skin colorization for 's1' and 's2' skins. Other player skins are currently not supported.

Unsupported features

The following features are not supported with the in-player playlist layout. If you need one of those features with playlist layout please refer to our external playlist design which support all player features.

  • Chromecast casting
  • Closed captions
  • Bitrate selector menu (for HLS auto adaptive bitrate streaming is enabled by default)
  • Ad scheduling or ad waterfalling
  • Live or DVR streaming
  • MPEG-DASH or WebM streaming
  • Audio-only
  • Google Analytics or player API analytics (if you want to, you can build your own analytics system with the player API)
  • Backup bitrates
  • In-player playlist menu with Flash fallback (for Flash only the first playlist item will be displayed)
  • Player size ratio other than 16:9. Ratio other than 16:9 could work but we do not guarantee support.

Player settings

inPlayerPlaylist: Array

This setting stores the data for each playlist item. Each element of the array is an object containing a title, src, poster and (optional) adTagUrl properties. Each of these properties is expressed as string. Default: []. See player code below for a full example.

inPlayerPlaylistAutoNext: Boolean

Set the autonext behaviour for the playlist. When set to true and when a playlist item has ended the next item on the playlist will automatically be loaded and played. Default: true.


Player code example

<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<div id="rmpPlayer"></div>
<script>
// We set up our playlist items
// For each playlist item we have a title, a src (source streaming URL) and an optional adTagUrl (should you want video ads to run in the playlist)
var playlist = [{
  title: 'Playlist item 2',
  src: 'https://streamingrmp-1479.kxcdn.com/vod/mp4:defile-on-2.mp4/playlist.m3u8',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.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%3Dskippablelinear&correlator='
}, {
  title: 'Playlist item 3',
  src: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb-long.smil/playlist.m3u8',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-ads.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%3Dredirectlinear&correlator='
}, {
  title: 'Playlist item 4',
  src: 'https://streamingrmp-1479.kxcdn.com/vod/mp4:ed-360p.mp4/playlist.m3u8',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-in-player-playlist.jpg',
  adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=480x70&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%3Dnonlinear&correlator='
}, {
  title: 'Playlist item 5',
  src: 'https://streamingrmp-1479.kxcdn.com/vod/mp4:slider.mp4/playlist.m3u8',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.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='
}, {
  title: 'Playlist item 6',
  src: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-ads.jpg',
  adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/skippable.xml'
}, {
  title: 'Playlist item 7',
  src: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb-long.smil/playlist.m3u8',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-in-player-playlist.jpg',
  adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline.xml'
}, {
  title: 'Playlist item 8',
  src: 'https://streamingrmp-1479.kxcdn.com/vod/mp4:ed-360p.mp4/playlist.m3u8',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg',
  adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/skippable.xml'
}, {
  title: 'Playlist item 9',
  src: 'https://streamingrmp-1479.kxcdn.com/vod/mp4:slider.mp4/playlist.m3u8',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-ads.jpg',
  adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/inline.xml'
}];
// This is the bitrate for the first playlist item.
var bitrates = {
  hls: 'https://streamingrmp-1479.kxcdn.com/vod/smil:bbb.smil/playlist.m3u8'
};
// We set our player settings. Those settings will be applied to each item of the playlist.
var settings = {
  bitrates: bitrates,
  licenseKey: 'your-license-key',
  delayToFade: 4000,
  width: 960, // You should use a 16:9 ratio for the player size.
  height: 540, // You should use a 16:9 ratio for the player size..
  skin: 's1',
  sharing: true,
  nav: true,
  contentTitle: 'Playlist item 1', // This is the title for our first playlist item. This is a mandatory requirement.
  inPlayerPlaylist: playlist,
  inPlayerPlaylistAutoNext: true,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-in-player-playlist.jpg',
  ads: true,
  adTagUrl: 'https://www.radiantmediaplayer.com/vast/tags/skippable.xml' // This is the adTag for the first playlist item. This is a mandatory requirement if you use video ads within the playlist.
};
// Create and init player as usual
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>