Playground
Set the props, watch the player change, copy the code.
VideoCnProps
source
Native engine, no streaming JavaScript. The Quality setting stays greyed out: a progressive file has a single quality.
chapters
controls
visibility
autoHideDelay
playbackRate.rates
props
theme
palette
--radius
<VideoCn />
page.tsx
<VideoCn
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="/examples/big-buck-bunny-poster.jpg"
chapters={chapters}
/>chapters
const chapters = [
{ time: 0, label: "Morning in the meadow" },
{ time: 70, label: "Big Buck Bunny wakes up" },
{ time: 150, label: "The butterfly" },
{ time: 230, label: "Frank, Rinky and Gamera" },
{ time: 330, label: "The ambush" },
{ time: 460, label: "Revenge" },
{ time: 560, label: "Credits" },
];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