Radiant Media Player

Frame-accurate seeking

Search

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 seeking API will let you reach any frame in your video stream.

This feature is only supported for video stream with constant frame rate. Video streams with variable frame rate will not support frame-accurate seeking with our player (you can still seek in time with the seekTo API method for those streams).

Player settings

frameRate: Boolean

By default the player will auto-guess frame rate as soon as it starts playing. This auto-guess feature is only available where the requestVideoFrameCallback API is available (as of mid 2021 this is in latest Chrome, MS Edge, Opera and Samsung Internet). If you know in advance the frame rate of your video then passing that information to the player will help to provide better cross-device support and to make frame-accurate seeking available before the player actually starts (on stream load). 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/7.3.0/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,
    frameRate: 24, 
    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>