Frame-accurate Seeking

The Flowplayer Native frame-accurate seeking (FAS) plugin adds support for seeking to specific frames and SMPTE timecodes.

Since some browsers prohibit access to individual frames, the plugin uses a time-calculation approach which is not 100% accurate, but very close.

Table of contents

Manual Javascript setup

Include the plugin next to the core player:

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/fas.min.js"></script>

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed player

To enable the plugin in an OVP JavaScript (ESM) embed, import the plugin's ESM module after the embed module and register it with flowplayer(fas) before you create the player:

<div id="player-<media id>"></div>
<script type="module">
  import flowplayer from "https://embed.flowplayer.com/<player id>/<media id>.js";
  import fas from "https://cdn.flowplayer.com/releases/native/3/stable/esm/plugins/fas.min.js";

  flowplayer(fas);
  flowplayer("#player-<media id>", {});
</script>

Load the plugin from the same release channel or version as the player. In legacy async embeds, add "fas" to the "plugins": [] array instead.

Optionally configure the frame rate in the fas namespace.

The FAS plugin is not available in iframe embed codes.

Configuration

The plugin is configured with the top level configuration object fas.

Configuration properties:

    • parameter
    • description
    • frame_rate
    • The frame rate of current video. 30 is assumed if omitted.

API

The API lives under fas namespace in the Player API.

    • method
    • description
    • current_frame()
    • Returns the frame at current time.
    • current_timecode()
    • Returns the current SMPTE timecode.
    • seek_to(timecode_or_frame)
    • Seeks to either SMPTE timecode or frame number. If a string is passed as argument, SMPTE timecode is assumed. If a number is passed, frame number is assumed.
    • jump(n)
    • Seeks n frames forward (or backward if a negative number is passed).

Sample code

var player = flowplayer('#container', {
  src: '//edge.flowplayer.org/29.97fps.mp4',
  fas: {
    frame_rate: 29.97
  }
})

player.fas.seek_to(123);

Demo

Codepen

Endscreen Float on Scroll
Results