You are the flight controller.

The seek bar is a flight path across the film. Volume and speed are engine dials. Leave it alone for three seconds and the console lifts away, so the film is clear.

On the console

01 · PathFlight pathA real Video.js time slider. The chapters are events along it; drag the craft or press an event to fly there.
02 · PropulsionEngine dialsVolume and speed. Turn, drag or scroll; the throat of the engine glows from ember to white-hot.
03 · FlightLaunch, Hold, ResumePlay is a launch with an ignition flare. Buffering is a hold, and the Downlink lamp reads the link rate where the browser reports it.
04 · ClockMission clockElapsed time, with a countdown to the next event. At the end the craft settles into a parking orbit.

Keys and touch

Space or K launch and hold
1–5 fly to an event
N next event
← → 5 seconds
↑ ↓ volume
F full screen
? flight manual
On a phone, tap an event to fly there, and double tap either side of the film to skip 10 seconds

Use it

Put your media in place of the placeholder in src/video/skin.html, inside a Video.js player, and import src/video/skin.ts. That one import brings the stylesheet and the self-hosted fonts. Chapters become events on the path.

import './src/video/skin';

<video-player content-title="Charge">
  <!-- src/video/skin.html, with the placeholder replaced by: -->
  <mux-video playsinline crossorigin="anonymous">
    <track kind="chapters" srclang="en" src="chapters.vtt" default>
    <track kind="captions" srclang="en" src="captions.vtt" default>
  </mux-video>
</video-player>