Live streaming has become increasingly popular over the past few years in the streaming media industry. Radiant Media Player supports live video & audio streaming with the following streaming protocols:
Radiant Media Player sports a variety of optimisations for live streaming and a dedicated live UI. Upon startup, the player will detect if a stream is a live stream, and if so, will automatically trigger live optimisations.
You can also insert video advertisement (including VMAP or our ad-scheduler), use DRM, stream 360° video content and query our player API with live streaming to our player. A dedicated Live API is available.
Documentation for using Radiant Media Player with DVR streams can be found here.
Live latency is a real-world source of worry for live streamers. The below graphic shows what to
expect when it comes to latency for HLS or MPEG-DASH live streaming. If latency is a priority for you, you
should consider using low-latency
HLS or low-latency MPEG-DASH (note that
low-latency streaming needs to be explicitly enabled with lowLatencyMode
setting set to true).
Using HLS you can reach all supported devices by Radiant Media Player for live streaming.
<!-- Include Radiant Media Player - here we use the optimised build for hls.js --> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp-hlsjs.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <!-- Set up player configuration options --> <script> // Live HLS streaming source const src = { hls: 'https://your-live-hls-url.m3u8' }; // Your player settings const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
lowLatencyMode: Boolean
Support for Low-latency live HLS needs to be explicitly activated. Default: false
.
We support Low-Latency HLS (LL-HLS) according to Apple HLS specification. This includes support for the new Media Playlist Tags:
LL-HLS streams are automatically detected by the player and when this happens playback is automatically optimised for low-latency live streaming.
Here are our recommendations for LL-HLS to work best in our player:
Please also apply Apple recommendations on the subject:
<!-- Include Radiant Media Player - here we use the optimised build for hls.js --> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp-hlsjs.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <!-- Set up player configuration options --> <script> // Live HLS streaming source const src = { hls: 'https://your-live-hls-url.m3u8' }; // Your player settings const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, // LL-HLS support needs to be set explicitly lowLatencyMode: true, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
<!-- Include Radiant Media Player - here we use the optimised build for Shaka player --> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp-shaka.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <!-- Set up player configuration options --> <script> // Live DASH streaming source const src = { dash: 'https://your-live-dash-url.mpd', // Optional, but needed to support iOS before iOS 17.1 and older Android // hls: 'https://your-live-hls-url.m3u8' }; // Your player settings const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, // Here we tell the player to prioritise MPEG-DASH source dashFirst: true, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
lowLatencyMode: Boolean
Support for Low-latency live MPEG-DASH needs to be explicitly activated. Default: false
.
We support Low-Latency DASH (LL-DASH) (CMAF-CTE - Chunked Transfer Encoding) according to DASH-IF requirements.
When streaming live, content is sent in segments that are each a few seconds long. These segments shouldn't be shorter than 2 to 4 seconds or there could be a risk of poor performance/playback quality. With LL-DASH, if the player requests a segment which is not completed, chunks will be delivered as soon as they are available using Chunked Transfer Encoding. As media can be delivered to the client as soon as it is generated on the server side, overhead is reduced, allowing to reduce the client buffer and, as a result, latency.
Here are our recommendations for LL-DASH to work best in our player:
<!-- Include Radiant Media Player - here we use the optimised build for Shaka player --> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp-shaka.min.js"></script> <!-- Player container element --> <div id="rmp"></div> <!-- Set up player configuration options --> <script> // Live DASH streaming source const src = { dash: 'https://your-live-dash-url.mpd' }; // Your player settings const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, // LL-DASH support needs to be set explicitly lowLatencyMode: true, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); // Initialization ... and done! async function initRmpPlayer() { try { await rmp.init(settings); } catch(error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
livePresentationStartTimeAsDate
getter (String)
const livePresentationStartTimeAsDate = rmp.livePresentationStartTimeAsDate;
Returns String
(ISO/IEC 8601:2004), the presentation start
time
date for the live stream. For HLS this is the EXT-X-PROGRAM-DATETIME value of the
manifest. For MPEG-DASH this is the presentationTimeOffset|availabilityStartTime value. Returns
''
if
not available. For an epoch time in milliseconds use:
new Date(rmp.livePresentationStartTimeAsDate).getTime()
currentTime
getter (Number)
const currentTime = rmp.currentTime;
This getter returns a Number
, the current time in milliseconds for the
live stream. This value is relative to the current timestamp in the player (this is not an
absolute value) and may only be used for relative computation.
duration
getter (Number)
const duration = rmp.duration;
This getter returns a Number
, the duration in milliseconds for the current live
stream. This value is relative to the current timestamp in the player (this is not an absolute
value) and may only be used for relative computation.
syncToLiveEdge()
Promise.<|WarningData>
rmp.syncToLiveEdge().then(() => {
console.log('syncToLiveEdge was successful');
}).catch(warning => {
// something went wrong and the syncToLiveEdge request was not successful
console.warn(warning);
});
Returns a Promise that resolves if syncToLiveEdge request was successful or rejects to an WarningData Object. This method forces player to resync with live edge.
We have released a script on GitHub for splash screen handling for timed live event to be used with Radiant Media Player. We hope you find this useful for your project. This script can be used as a baseline for more advanced use-cases as well.
©2015-2025 Radiant Media Player. All Rights Reserved. ✝