1. Home
  2. asset
  3. videoplayer

Roles

These are the roles that are needed:

  • Asset
  • Search

Video Player

The iconik Frame-Accurate Video Player can play back video that is hosted by iconik or by the iconik Storage Gateway. It will automatically load video previews on the asset page when there is one available.

Navigating the Video.

There are four methods for navigation:

  • Using the buttons in the player and in the tools menu.
  • Using the scrub-bar.
  • Using Keyboard Shortcuts.
  • Entering time-code.

Buttons

  • Play button: Toggles between play and pause.
  • Rewind Button: Goes back by 10 frames.
  • Fast-Forward Button: Goes forward by 10 frames.
  • In-point Button: Sets the current time code as the in-point for comments and time based metadata
  • Out-point Button: Sets the current time code as the out-point for comments and time based metadata

Scrub-bar

This shows the current progress of playback through the video. It can also be used for navigating the video forwards and backwards. Hovering the scrub-bar will show the current time of the video above the playhead.

  • Grab the playhead, and drag left or right to change the current time.

Unless the player has a loaded range, the playhead will also have draggable range handles on both sides. Dragging these will set the in-point or out-point of a range for playback, comments, subclips or time based metadata.

Range

When a range is active, the playhead will have draggable range handles on both sides. Dragging these will set the in-point or out-point of a range. Ranges can also be created through the in-point and out-point buttons in the menu or the keyboard shortcuts [i] / [o]. The ranges are used for creating subclips or for adding comments or time based metadata based on the range, in the respective panels. Ranges can also be used for restricting the playback of the video to the selected time range, optionally looping the range.

Timecode Entry

Click in the time-code on the left. You can then enter the time-code to which you want the video to go to. When ranges are active this will show the start and end time of the range and entering a time-code will set the range in-point or out-point.

Keyboard Shortcuts

You can use the keyboard with the player. Meta represents the Ctrl key on Windows and Command (⌘) key on Mac.

Playback

  • [Space] - Play / Pause toggle.
  • [ArrowLeft] - Frame back.
  • [ArrowRight] - Frame forward.
  • [ArrowLeft+Shift] - 10 seconds backwards.
  • [ArrowRight+Shift] - 10 seconds forwards.
  • [l] - Increases the play rate going forwards.
  • [l+Shift] - Decreases the play rate going forwards.
  • [k] - Pause/Changes the play back speed to real time (1x).
  • [j] - Increases the play rate going backwards
  • [j+Shift] - Decreases the play rate going backwards

Range Controls

  • [i] - Set in-point for range.
  • [o] - Set out-point for range.
  • [c] - Clear range.

Annotations

  • [1] - Set annotation tool to brush.
  • [2] - Set annotation tool to arrow.
  • [3] - Set annotation tool to circle.
  • [4] - Set annotation tool to rectangle.
  • [8] - Set annotation tool to laser.
  • [5] - Set annotation tool to line.
  • [7] - Set annotation tool to text.
  • [s] - Set annotation tool to select/move.
  • [Backspace] - Delete selected annotation.
  • [z+Meta] - Undo annotation.
  • [z+Meta+Shift] - Redo annotation.
  • [ArrowRight+Meta] - Select next marker.
  • [ArrowLeft+Meta] - Select previous marker.
  • [ArrowUp+Meta] - Select next segment in marker.
  • [ArrowDown+Meta] - Select previous segment in marker.

Other Player features

  • [=] or [+] - Zoom in.
  • [-] - Zoom out.
  • [x] - Flip media in player.
  • [y] - Flop media in player.
  • [f] - Enter full screen mode.
  • [Escape] - Exit full screen mode.
  • [n] - Navigate to previous asset.
  • [m] - Navigate to next asset.

When playing video in any speed other than real-time web-browsers usually stop audio playback

Compare Videos

The Compare Mode allows users to view and analyze two videos at the same time and is available if there are multiple different versions of the same asset. It allows comparisons in three different modes, side-by-side, overlay and wipe. Overlay has an opacity slider that allows gradual control of which asset is the primary while comparing, and wipe has a handle that allows you to select an angle and a wipe point for your comparison.

Activating Compare Mode

  1. Click the Compare button in the tools menu to enable Compare Mode.
  2. Select assets in the comparison bar appearing at the top of the screen.
  3. Default comparison mode is side-by-side. Select mode in the comparison bar.

Playback Sync

Both videos are synced and will play simultaneously. Due to browser limitations there might be a minor delay of a few frames between them, but muting the audio in the player will minimize the delay.

Full Screen Mode

You can make the player go full screen.

  • Click the full screen icon to go full screen or press [f].
  • When full screen click the small icon to reduce the player back to normal.
  • When full screen you can also press [Escape] to go back to normal.

For more information on read out help page on full screen

Learn more