Spectator mode a Video.js v10 skin for esports broadcasts, scrims and game VODs
Watch the match,not the movie.
Sightline turns a Video.js player into a spectator client. One POV fills the stage, two more views play beside it and stay live, a kill feed calls the action, and the seek bar is a lane of events you can jump to.
- 123 switch angle
- N next highlight
- R instant replay
- W multiview fullscreen
Round 3 · Defenders vs Attackers
Click an angle or press 1–3: it swaps onto the stage at the same timestamp.
Match recap
every event is a seek01
Built for spectators
Everything a viewer needs to follow a match, and nothing a film player needs instead.
Angles on the stage
Two more views play beside the stage, live and in sync: here an aim cam and the radar, or other players. Click one or press 1–3 and it swaps in at the same moment.
An event lane
Every kill, clutch, objective and round is a pin above the seek bar, in the colour of the side that scored, and hovering shows the frame. N jumps to the next.
Instant replay
R plays the last eight seconds at half speed, then hands back to the match where you left it.
Multiview fullscreen
W fills the screen with the stage and its angles, and nothing else: no page, no navigation.
Kill feed and HUD
A game-style feed calls each event as it happens; the scoreboard and active angle sit on solid chips.
Spoiler-free and shareable
Hide every score and event for a late watch, or copy a link that opens on this exact moment and angle.
02
Make it yours
The public Video.js properties drive the whole skin. Change them here and watch the player at the top.
03
Accessible on purpose
Measured, not assumed. The full audit, item by item, is in the repository.
- 100Lighthouse accessibility
- 5.28 : 1lowest text contrast, over a pure white frame
- 48 pxtouch targets on phones
- < 0.01layout shift while the page loads
- Keyboard first. Every control in visual order with one visible ring; menus close with Esc and hand focus back.
- Never colour alone. Every event has its own glyph; "on" states change shape or label too.
- Calm on request. Reduced motion stops the sweeps, the pulse and the spinner; swaps cut instead of fade.
- Forced colours. System colours throughout; event pins keep their glyphs; focus uses Highlight.
04
Install
Sightline is skin source for Video.js 10: copy it into your project and keep the public properties.
-
Add Video.js 10 and the fonts
npm i @videojs/html @videojs/mux-video @fontsource/inter @fontsource/barlow-condensed @fontsource/jetbrains-mono -
Copy the skin and import it
import '@videojs/html/video/player'; import '@videojs/html/media/mux-video'; import './sightline/video/skin'; // src/ from the repository -
Add your stream and its events
<video-player> <!-- skin.html markup, with your media where it says --> <mux-video src="https://stream.mux.com/PLAYBACK_ID.m3u8" crossorigin> <track kind="metadata" label="events" src="events.vtt" default> </mux-video> </video-player>