This guide will explain how you can achieve frame-accurate seeking with THEOplayer. It will explain how to calculate the current frame of your player, how to seek to a specific frame and known limitations with this approach.
The current frame of the player can be calculated given the current time of the player, the time at which the first frame is located and the framerate. A possible implementation could be:
function getCurrentFrame(player) {
var activeQuality = player.videoTracks[0].activeQuality
return Math.round(
(player.currentTime - activeQuality.firstFrame) * activeQuality.frameRate -
0.5
)
}
NOTE: This implementation depends on the first frame and frameRate of the active video quality. This information is not available until start of playback. When an active quality is chosen, an activequalitychanged
event will be dispatched. The active quality is then accessible but might not have initialized values for the framerate and firstframe properties. When these properties are updated, an update
event will be dispatched on the active quality. Using these two events, you can determine from when frame accurate seeking is possible.
Given a certain frame number, it is possible to seek to this frame specifically. To obtain this behavior, the time that corresponds with the frame should be calculated. A possible implementation could be:
function seekToFrame(player, targetFrame) {
var activeQuality = player.videoTracks[0].activeQuality
var time =
(targetFrame + 0.5) / activeQuality.frameRate + activeQuality.firstFrame
player.currentTime = time
}
The previous sections can be combined to obtain a wide variety of use cases. Suppose you desire to seek to 100 frames after the current one, this can easily be obtained with the following snippet:
seekToFrame(player, getCurrentFrame(player) + 100)
The approach mentioned above is easy and straightforward, however it does have some limitations.