Frame-accurate navigation

Scope of support

Looking to seek at an exact frame in a video stream? Radiant Media Player can do that as well! Whether you are editing video or marking specific parts of your content, our frame-accurate navigation API will let you reach any frame in your video stream.

Player settings

frameRate: Number

Specifies frame rate for frame-accurate navigation. For MPEG-DASH and HLS streaming frameRate is auto-guess by default (for HLS streaming FRAME-RATE attribute must be defined in manifest). If you set frameRate explicitly for HLS or MPEG-DASH streaming, the player will use the input frame rate but this value will not change throughout player session. When frame rate is auto-guess frame rate values may vary if renditions in a same manifest do not have the same frame rate. For progressive download frameRate needs to be explicitly set for frame-navigation to work. Default: -1.

Player API methods

currentFramerate getter

rmp.currentFramerate;

This getter returns the current frame rate for the video stream being played in the player. Returns -1 if that value is not available.

droppedFramesCount getter

rmp.droppedFramesCount;

This getter returns the number of dropped frames so far in the video stream. It is not unusal for decoding errors to happen and for the number of dropped frames to be greater than 0. If the number of dropped frames is however too high this could indicate an issue with the video stream being displayed. Returns -1 if that value is not available.

currentFrameNumber getter

rmp.currentFrameNumber;

This getter returns the number of the current frame being displayed on stage. Returns -1 if that value is not available.

totalFramesNumber getter

rmp.totalFramesNumber;

This getter returns the total number of frames in the video stream. Returns -1 if that value is not available.

seekToFrame(frameNumber) Promise.<|WarningData>

rmp.seekToFrame('100').then(() => {
  console.log('syncToLiveEdge was successful');
}).catch(warning => {
  // something went wrong and the seekToFrame request was not successful
  console.warn(warning);
});

Returns a Promise that resolves if seekToFrame request was successful or rejects to a WarningData Object. Seek to the input frameNumber (String). You may also pass 'next' or 'previous' to seek to the next or previous frame on stage as input parameter.

Player API events

framerateavailable

This event fires when player knows frame rate for current video stream. If renditions in a same manifest have different frame rate a framerateavailable event will fire each time the frame rate changes.

Player code example - see this example here

<!-- Include Radiant Media Player - here we use the optimised build for HLS streaming -->
<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>

  // 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,
    // If you use MP4/WebM progressive download you need to explicitly set frameRate setting
    // This is auto-guess for MPEG-DASH and HLS (FRAME-RATE attribute required in manifest for HLS)
    // frameRate: 24,
    // If you want to start using frame navigation before play set preload: 'auto'
    preload: 'auto',
    // For frame navigation to work on Apple devices
    forceMseHlsOnAppleDevices: true,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };

  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);

  rmp.one('playing', async () => {
    try {
      await rmp.seekToFrame('1000');
      //await rmp.seekToFrame('next'); // Also possible
    } catch (warning) {
      console.warn(warning);
    }
    rmp.pause();
    console.log(rmp.totalFramesNumber);
  });

  // Player initialisation
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);  
      console.log('player ready');
    } catch (error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();

</script>