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.

This feature is only supported for video stream with constant frame rate.

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

getFramerate()

rmp.getFramerate()

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

getDroppedFramesCount()

rmp.getDroppedFramesCount()

Returns the number of dropped frames so far in the video stream. It is not unusal for decoding error 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.

getCurrentFrameNumber()

rmp.getCurrentFrameNumber()

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

getTotalFramesNumber()

rmp.getTotalFramesNumber()

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

seekToFrame(frameNumber)

rmp.seekToFrame('100')

Seek to the input frameNumber. frameNumber must be a string. You may also pass 'next' or 'previous' to seek to the next or previous frame on stage.

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/9.15.19/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: 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
    forceHlsJSOnAppleDevices: true,
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);
  const container = document.getElementById(elementID);
  let firstPlaying = true;
  rmp.on('playing', () => {
    if (firstPlaying) {
      firstPlaying = false;
      rmp.seekToFrame('1000');
      rmp.pause();
      // rmp.seekToFrame('next');
      console.log(rmp.getTotalFramesNumber());
    }
  });
  rmp.init(settings);
</script>