DVR Streaming

DVR support in Radiant Media Player

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:

• HLS
• MPEG-DASH

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.

Player settings

dvrUIThreshold: Number

Minimum time in seconds of the DVR window for the DVR UI to be shown. Default: 300.

Player code example

HLS DVR

<!-- 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>

MPEG-DASH DVR

<!-- 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>

iOS, macOS, Google Cast considerations

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.

DVR API

DVR API method

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.

DVR API events

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