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

enableFrameNavigation: Boolean

Enables frame-by-frame navigation feature in the player. Framerate is auto-guess where the requestVideoFrameCallback API is available. Default: false.

frameRate: Number

Specifies frame rate for frame-accurate navigation. Framerate is auto-guess when using MPEG-DASH or HLS with hlsEngine set 'shakaplayer'. For HLS with hls.js (this is default for HLS streaming) or progressive download frameRate needs to be explicilty 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 code example - see this example here

<!-- Include Radiant Media Player - here we use the optimised build for hls.js -->
<script src="https://cdn.radiantmediatechs.com/rmp/8.1.2/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,
    enableFrameNavigation: true, 
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const elementID = 'rmp';
  const rmp = new RadiantMP(elementID);
  const container = document.getElementById(elementID);
  let firstPlaying = true;
  container.addEventListener('playing', () => {
    if (firstPlaying) {
      firstPlaying = false;
      rmp.seekToFrame('1000');
      rmp.pause();
      // rmp.seekToFrame('next');
      console.log(rmp.getTotalFramesNumber());
    }
  });
  rmp.init(settings);
</script>