DVR streaming offers the possibility to rewind into a live stream to watch recorded content. Radiant Media Player features a specific DVR UI, including intuitive in-stream navigation and jump-to-live functionalities. DVR streaming with Radiant Media Player is supported for the following streaming protocol:
DVR for audio-only streaming is also supported.
Radiant Media Player sports a variety of optimisations for DVR streaming. DVR streams are automatically
detected based on the dvrUIThreshold
setting.
You may also insert video ads, use DRM or 360 video content and query our dedicated DVR API to fine tune your DVR player.
dvrUIThreshold: Number
Minimum time in seconds of the DVR window for the DVR UI to be shown. Default: 300.
<!-- 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> // DVR HLS source const src = { hls: 'https://your-dvr-hls-url.m3u8' }; // Your player settings const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, // To enable full DVR UI on Apple devices forceMseHlsOnAppleDevices: true, // Here we tell the player when to enable DVR UI and optimisations dvrUIThreshold: 300, 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> // DVR MPEG-DASH source const src = { dash: 'https://your-dvr-dash-url.mpd' }; // Your player settings const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, // Here we tell the player when to enable DVR UI and optimisations dvrUIThreshold: 300, 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>
On Apple devices we fully support DVR navigation when
forceMseHlsOnAppleDevices
is set to true with HLS. For MPEG-DASH this is supported out of the box,
but note that you will need to provide an HLS fallback (while using dashFirst
setting to true) to the player if you want to support iOS before iOS 17.1. On iOS (any version) and in fullscreen mode, Apple native player will provide DVR controls.
When casting a DVR stream through Google Cast, the player handles the DVR stream as a simple live stream. This is because DVR controls in our custom receiver application are currently unavailable.
dvrSeekTo(ms)
Promise.<|WarningData>
rmp.dvrSeekTo(60000).then(() => {
console.log('dvrSeekTo was successful');
}).catch(warning => {
// something went wrong and the dvrSeekTo request was not successful
console.warn(warning);
});
Returns a Promise that resolves if dvrSeekTo request was successful or rejects to a WarningData Object.
This method allows seeking into the recorded sliding window of a DVR stream. Input parameter is a
Number
expressed in milliseconds. If the input is greater
than the sliding window duration then the player will jump to live.
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 will cause the player to exit the recorded DVR sliding window and to jump to live content.
duration
getter (Number)
const duration = rmp.duration;
This getter returns a Number
expressed in milliseconds
representing the current duration of the DVR recorded sliding window.
currentTime
getter (Number)
const currentTime = rmp.currentTime;
This getter returns a Number
expressed in milliseconds
representing the relative time from the start of the DVR current window (while the player is in DVR recorded
mode).
getStreamMode()
Promise.<string|WarningData>
rmp.getStreamMode().then(streamMode => {
console.log(streamMode);
}).catch(warning => {
console.warn(warning);
});
// or with await in an async function
try {
const streamMode = await rmp.getStreamMode();
} catch (warning) {
console.warn(warning);
}
Returns a Promise that resolves to the current player stream mode
('livedvr'
|'voddvr'
|'live'
|'vod'
) or rejects to a
WarningData Object.
dvrislive
This event fires when the DVR stream becomes live due to a user interaction or a call to
syncToLiveEdge
API method
dvrisvod
This event fires when the DVR stream becomes VOD due to a user interaction or a call to
dvrSeekTo
API method
©2015-2025 Radiant Media Player. All Rights Reserved. ✝