> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wikio.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Video player

> A sleek, reusable video player with YouTube-style shortcuts and editor-level precision: frame step, markers, jog or shuttle, subtitle sync.

A reusable component for previewing video assets within pages like the homepage or the content item screen. It includes play or pause, scrubber, volume, captions, and fullscreen. The look is sleek and modern, while shortcuts feel familiar to YouTube and Netflix.

<img src="https://mintcdn.com/wikioai/GnqnXT_62mFa97E0/images/screenshots/asset-detail-full.png?fit=max&auto=format&n=GnqnXT_62mFa97E0&q=85&s=dca545b9b3205525d9356a66d91f6747" alt="Video player with playback controls, timeline, and right panel" width="2880" height="1800" data-path="images/screenshots/asset-detail-full.png" />

<Callout type="info">
  Use the keys shown in <kbd>kbd</kbd> tags. On Mac, <kbd>⌥</kbd> means Option. On Windows or Linux, use <kbd>Alt</kbd>.
</Callout>

## Basic playback

<kbd>Space</kbd> → Play or pause\
<kbd>K</kbd> → Stop playback\
<kbd>L</kbd> → Play forward. Press repeatedly to increase speed to 2x, 4x, 8x\
<kbd>J</kbd> → Play backward. Press repeatedly to increase reverse speed to −2x, −4x, −8x\
<kbd>⇧ Shift</kbd> + <kbd>L</kbd> or <kbd>⇧ Shift</kbd> + <kbd>J</kbd> → Slow play forward or backward at 0.5x

## Accurate navigation

**When playing**

<kbd>←</kbd> → Seek back 5 s\
<kbd>→</kbd> → Seek forward 5 s

**When paused**

<kbd>←</kbd> → Step back 1 frame\
<kbd>→</kbd> → Step forward 1 frame\
<kbd>⇧ Shift</kbd> + <kbd>←</kbd> → Step back 5 frames\
<kbd>⇧ Shift</kbd> + <kbd>→</kbd> → Step forward 5 frames

## Audio and subtitles

<kbd>↑</kbd> or 🔉 <kbd>↓</kbd> → Increase or decrease volume\
<kbd>M</kbd> → Mute or unmute\
<kbd>C</kbd> → Toggle captions or subtitles if available

## Display

<kbd>F</kbd> → Toggle fullscreen\
<kbd>Esc</kbd> → Exit fullscreen

## Editor tools

These controls add precision for review and editing.

* Add marker at playhead → <kbd>B</kbd>
* Loop between in and out → set <kbd>I</kbd> for in, <kbd>O</kbd> for out, then <kbd>;</kbd> to toggle loop
* Jog or shuttle (fine control) → Hold <kbd>K</kbd> and tap <kbd>L</kbd> or <kbd>J</kbd> for micro stepping
* Subtitle sync offset → <kbd>⌥ Alt</kbd> + <kbd>,</kbd> shifts subtitles −50 ms, <kbd>⌥ Alt</kbd> + <kbd>.</kbd> shifts +50 ms
* Jump to markers → <kbd>⌥ Alt</kbd> + <kbd>←</kbd> previous, <kbd>⌥ Alt</kbd> + <kbd>→</kbd> next

<Callout type="warning">
  Shortcuts can vary by keyboard layout. If a key conflicts with a browser or OS shortcut, use the in player menu to remap it.
</Callout>

## Quick reference

| Action                     | Shortcut                                                               |
| -------------------------- | ---------------------------------------------------------------------- |
| Play or pause              | <kbd>Space</kbd>                                                       |
| Stop                       | <kbd>K</kbd>                                                           |
| Faster forward or backward | <kbd>L</kbd> or <kbd>J</kbd> (repeat)                                  |
| Slow play                  | <kbd>⇧ Shift</kbd> + <kbd>L</kbd> or <kbd>⇧ Shift</kbd> + <kbd>J</kbd> |
| Seek ±5 s (playing)        | <kbd>←</kbd> or <kbd>→</kbd>                                           |
| Frame step ±1 (paused)     | <kbd>←</kbd> or <kbd>→</kbd>                                           |
| Frame step ±5 (paused)     | <kbd>⇧ Shift</kbd> + <kbd>←</kbd> or <kbd>⇧ Shift</kbd> + <kbd>→</kbd> |
| Volume up or down          | <kbd>↑</kbd> or <kbd>↓</kbd>                                           |
| Mute                       | <kbd>M</kbd>                                                           |
| Captions                   | <kbd>C</kbd>                                                           |
| Fullscreen or exit         | <kbd>F</kbd> or <kbd>Esc</kbd>                                         |
| Add marker                 | <kbd>B</kbd>                                                           |
| Loop in or out             | <kbd>I</kbd> or <kbd>O</kbd> then <kbd>;</kbd>                         |
| Next or previous marker    | <kbd>⌥ Alt</kbd> + <kbd>→</kbd> or <kbd>⌥ Alt</kbd> + <kbd>←</kbd>     |
| Subtitle sync ±50 ms       | <kbd>⌥ Alt</kbd> + <kbd>,</kbd> or <kbd>⌥ Alt</kbd> + <kbd>.</kbd>     |
