Demo
The player and its control bar, exactly as they reach your project. The panel shows the element's raw state, read without ever touching it: that is how you can check that every control really reaches the video.
Native engine. Nothing to pick: the browser says nothing about what is inside a progressive file, so the quality button stays disabled. Seven chapters, cutting the bar and filling a menu.
The panel reads the element, not the controls: what it shows proves the action really reached the video.
Keyboard shortcuts
Active as soon as the player has focus: one click on the picture is enough. On a focused slider, seek or volume, the arrows drive that slider.
- SpaceorK
- Play / pause
- ←/→
- Seek back / forward 5 s
- ↑/↓
- Volume up / down 5%
- M
- Mute / unmute
- F
- Fullscreen
- 0–9
- Jump to 0%, 10%… 90% of the video
Element state
Read-only. Play, pause, change the speed from the bar: everything here should move.
Playhead
- currentTime
- 0.00 s
- bufferedStart
- 0.00 s
- bufferedEnd
- 0.00 s
Playback
- duration
- 0.00 s
- paused
- yes
- ended
- no
- isBuffering
- no
- volume
- 0.00
- muted
- no
- playbackRate
- 1.00×
Loading
- readyState
- 0 — HAVE_NOTHING
- networkState
- 0 — EMPTY
- error
- —
Display
- isFullscreen
- no
- isPictureInPicture
- no
Configured through props
No Picture-in-Picture, three speeds instead of seven, a bar that hides after one second, no keyboard shortcuts. Same chapters as above, but kept out of the bar: cutting it up is a matter of looks, not of content.