videoCn
GitHub
Chapters are here

A video player for shadcn/ui

It picks up your project’s theme, installs with one command and is configured through props. The code is yours.

Get startedOpen the playground
$ pnpm dlx shadcn@latest add https://videocn.dev/r/player.json
--radius
0 seconds
<VideoCn />

One tag. Every control is a prop.

The control bar is not yours to rebuild. Hide a button, change a list of values or swap the source through props, and keep the code you installed untouched.

src
0 seconds
<VideoCn
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="/examples/big-buck-bunny-poster.jpg"
/>
shadcn add

One command. Then the code is yours.

The CLI copies the player into your project, one file per control. No package to update, nothing to eject: read it, change it, keep it.

Terminal

$ pnpm dlx shadcn@latest add https://videocn.dev/r/player.json

✔ Checking registry.

✔ Installing dependencies.

✔ Created 30 files:

  • - components/ui/video-player/player-engine.ts
  • - components/ui/video-player/native-engine.ts
  • - components/ui/video-player/shaka-engine.ts
  • - components/ui/video-player/resolve-engine.ts
  • - components/ui/video-player/playhead-store.ts
  • - components/ui/video-player/player-state-store.ts
  • - components/ui/video-player/use-player.ts
  • - components/ui/video-player/player-context.tsx
  • - components/ui/video-player/format-time.ts
  • - components/ui/video-player/chapters.ts
  • - components/ui/video-player/controls-options.ts
  • - components/ui/video-player/controls-context.tsx
  • - components/ui/video-player/chapters-context.tsx
  • - components/ui/video-player/use-controls-visibility.ts
  • - components/ui/video-player/use-keyboard-shortcuts.ts
  • - components/ui/video-player/video-cn.tsx
  • - components/ui/video-player/player-controls.tsx
  • - components/ui/video-player/player-menu.tsx
  • - components/ui/video-player/player-slider.tsx
  • - components/ui/video-player/use-scrub.ts
  • - components/ui/video-player/player-scrubber.tsx
  • - components/ui/video-player/chapter-segments.tsx
  • - components/ui/video-player/play-toggle.tsx
  • - components/ui/video-player/volume-control.tsx
  • - components/ui/video-player/time-display.tsx
  • - components/ui/video-player/live-badge.tsx
  • - components/ui/video-player/chapter-menu.tsx
  • - components/ui/video-player/settings-menu.tsx
  • - components/ui/video-player/picture-in-picture-toggle.tsx
  • - components/ui/video-player/fullscreen-toggle.tsx
14 kB gzip
The whole player, controls included. React, lucide-react and your shadcn button are the ones your app already ships.
262 kB gzip, on demand
Shaka Player, fetched only when the source is HLS or DASH. An MP4 or WebM never downloads a line of it.
No API
The player reads standard web formats and never calls a videoCn service.
changelog

What shipped, and what is next.

Each release is a set of new props. The player stays free, and complete on its own.

  1. Chapters

    Segments on the progress bar, a menu to jump between them, and a thicker segment under the pointer.

    chapterscontrols.chapterscontrols.scrubber.chapters

  2. HLS, DASH and live

    Shaka Player, loaded only for streaming sources. Quality selector, live window with DVR and a badge back to the edge.

    typecontrols.qualitycontrols.live

  3. Keyboard shortcuts

    The YouTube keymap, scoped to the player and ignored in your inputs.

    controls.keyboard

  4. First release

    Native engine, control bar, an accessible progress bar and volume slider shared by both, speed menu, fullscreen and Picture-in-Picture.

    srcpostercontrols

coming next

  • SubtitlesYour WebVTT tracks, a picker, size and position.
  • Chapters from a fileA WebVTT chapters file, next to the array.
  • Hover thumbnailsFrame previews from a WebVTT storyboard.
  • Most replayedA heatmap above the progress bar.