EXTENDED UI

Media Player

Video and audio for reviews, behind-the-scenes and client delivery. Every player here plays.
THEME
01

Video playground

Style, controls, quality, speed, A–B loop, captions, shortcuts
Drop poster · 1920×1080 INTRO Auto ▶
0:00 / 0:48
Click the player, then press ? for shortcuts.
<VideoPlayer src="/media/parka.mp4" poster="/media/parka.jpg" variant="default" controls="auto" captions="/media/parka.en.vtt" chapters={chapters} qualities={["720p","1080p","4K"]} rates={[0.5,1,1.25,1.5,2]} thumbnails="/media/parka.sprite.jpg" hotkeys pictureInPicture />
Settings
STYLE
CONTROLSHide while playing until you move over the player
02

Review & approve

Comments on the timeline and version compare
Review on the timelinepins · comment at the playhead · approve
Drop poster · 1920×1080 INTRO Auto ▶
0:00 / 0:48
Lena Holm client · 2 hLove the opening. Can the title come in a bit later?
Jonas Berg client · 1 hLogo on the sleeve should be sharper here.
Olivia Lane you · 20 minSwap music after the wind hits.
In review · v22 open · 1 resolved
Compare versionsdrag the divider
v2 · cooler shadows
v1 · warm
⇆
Same frame, two grades. Use ← → on the divider for precise steps.
03

Audio

Waveform, voice notes and a playlist
Waveform playerclick the wave to seek
Studio sound — glaze sessionKaya Ceramics · field recording
0:003:04
Voice notein chat · with transcript
0:24
Hi Olivia — quick one: the parka shots from the coast are perfect, but can we try one version with a bit more blue in the shadows? No rush, Friday is fine. Thanks!
The transcript follows along as it plays.
Playlistprev · next · shuffle · repeat
Glaze session — kiln roomKaya Ceramics · 0:00 / 3:04
04

Variants

Hover preview, chapters, vertical, gallery and live
Hover previewmuted · resets on leave
🔇 PREVIEW0:48
Parka lookbook — the filmFjord Outdoor · 0:48 · hover to preview
Chaptersclick to jump
Drop poster · 1920×1080 INTRO Auto ▶
0:00 / 0:48
Vertical 9:16stories · tap to pause
AVavava.studio
▶Day 3 · studio packshots
Paused · clip 1 of 3 · tap to play
Galleryduration · watched progress
Livestatus · viewers · latency
OFFLINE · join👁 10Studio A · Spring 27 shoot day 3
Shoot day 3 is live from Studio A
05

States & a11y

Loading, buffering, errors, end screens — and the rules
Statesloading · buffering · error · ended
Drop poster · 1920×1080 INTRO Auto ▶
0:00 / 0:48
Poster + big play button. Nothing loads beyond metadata until play.
Checklist7 of 8 checked
Markup
<figure>
  <video controls preload="metadata" poster="poster.jpg"
         aria-label="Parka lookbook — the film">
    <source src="parka.mp4" type="video/mp4">
    <track kind="captions" src="parka.en.vtt" srclang="en" label="English" default>
  </video>
  <figcaption>Parka lookbook · 0:48 · transcript below</figcaption>
</figure>
FULL PLAYERClient delivery and reviews — every control, captions, quality.Proposal films, finals
MINIMALInside cards and posts where the film is one part.Blog, case studies
HOVER PREVIEWBrowsing many clips — muted, resets on leave.File Manager, galleries
AUDIO + TRANSCRIPTVoice notes and field sound — readable without playing.Chat, BTS notes
DO✓Show a real poster frame, not black✓Keep captions on for social cuts✓Let people comment on the exact frame✓Remember volume and speed between films✓Offer 720p for slow connections
DON’T✕Autoplay with sound✕Hide the seek bar on long films✕Autoplay the next film without asking✕Put controls over important picture content✕Ship a film without captions