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.
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
.
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.
<!-- Include Radiant Media Player - here we use the optimised build for hls.js --> <script src="https://cdn.radiantmediatechs.com/rmp/9.10.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, 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; rmp.on('playing', () => { if (firstPlaying) { firstPlaying = false; rmp.seekToFrame('1000'); rmp.pause(); // rmp.seekToFrame('next'); console.log(rmp.getTotalFramesNumber()); } }); rmp.init(settings); </script>
©2015-2023 Radiant Media Player. All Rights Reserved.