Radiant Media Player

Live and DVR streaming



Live & DVR video tutorial


Live video streaming

HTML5 Flash

At Radiant Media Player we put a specific focus on supporting live video streaming. Live video streaming has become more and more popular over the years and quality live video streaming is now within reach of every company or individual. Radiant Media Player supports live video streaming with the following streaming protocols:

  • HLS: HTML5 & Flash video
  • MPEG-DASH: HTML5 video only

As always Radiant Media Player will opt for HTML5 video first (for desktop and mobile devices) wherever possible. Where live video streaming to HTML5 video is not possible our HLS to Flash fallback may come in handy to support the legacy web. You can use a full HLS solution or a combination of HLS & MPEG-DASH depending on your project requirements.

Live audio-only streaming is also possible with HLS or MPEG-DASH.

Other requirements, recommendations or advanced streaming settings define in our streaming documentation page apply to live video streaming as well.

Radiant Media Player sports a variety of optimisation for live video streaming. Those optimisations are triggered with the isLive setting set to true.

You can insert video ads (including VMAP or our customer ad scheduler) or use DRM/AES-128 encrypted content with live video streaming as well.

Player code example for live video streaming with HLS:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
// This live stream may not be available 24/7 - use your own
var bitrates = {
  hls: 'https://streamingrmp-1479.kxcdn.com/testlive/smil:live.smil/playlist.m3u8'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  isLive: true, 
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>

Player code example for live video streaming with MPEG-DASH (with HLS fallback)

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
// Those live streams may not be available 24/7 - use your own
var bitrates = {
  dash: 'https://wowzaec2demo.streamlock.net/live/bigbuckbunny/manifest_mpm4sav_mvtime.mpd',
  hls: 'https://streamingrmp-1479.kxcdn.com/testlive/smil:live.smil/playlist.m3u8'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  isLive: true, 
  dashFirst: true,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>

DVR video streaming

HTML5 Flash

DVR streaming offers the possibility to rewind into a live stream to watch previously delivered content. Radiant Media Player sports a specific DVR UI for HTML5 and Flash video, including intuitive in-stream navigation and jump-to-live functionalities. DVR streaming with Radiant Media Player is supported for the following streaming protocol.

  • HLS: HTML5 & Flash video

As always Radiant Media Player will opt for HTML5 video first (for desktop and mobile devices) with HLS streaming and fallback to HLS to Flash where live video streaming in HTML5 video is not possible.

DVR audio-only streaming is currently not supported.

Other requirements, recommendations or advanced streaming settings define in our streaming documentation page apply to live video streaming as well.

Radiant Media Player sports a variety of optimisation for DVR video streaming. Those optimisations are triggered with the isLiveDvr setting set to true.

You can insert video ads (only pre-roll or overlay ads are supported for DVR streaming) or use AES-128 encrypted content with DVR video streaming as well.

Player code example for DVR video streaming with HLS:

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
<!-- Set up your wrapper div with its unique id -->
<div id="rmpPlayer"></div>
<!-- Set up player configuration options -->
<script>
// First we specify bitrates to feed to the player
var bitrates = {
  // This URL is inactive - use your own
  // Apple HLS is required for DVR video
  hls: 'http://your-streaming-server:1935/live/stream/playlist.m3u8?DVR'
};
// Then we set our player settings
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,  
  delayToFade: 3000,
  width: 640,
  height: 360,
  isLiveDvr: true,
  skin: 's3',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
};
// Reference to the wrapper div (unique id)
var elementID = 'rmpPlayer';
// Create an object based on RadiantMP constructor
var rmp = new RadiantMP(elementID);
// Initialization ... test your page and done!
rmp.init(settings);
</script>

On iOS the live stream will play but without the scrub bar. Apple did remove the possibility to have this scrub bar with iOS8. This has been escalated to Apple and can be tracked here.