Videojs

Overview

Video.js is the long-running open-source web video player, and version 10 adds a shadcn registry for its player skins. The shadcn method copies a skin's components, layout, styles and interactions into an app as editable React source (or HTML custom-element source), so the player UI can be reviewed and changed like any other code.

Skins come in default, neutral, compat and scaffold variants across video, audio, live video, live audio and background presets. Media adapters cover HTML5 video and audio, HLS, DASH, Mux, Cloudflare, YouTube, Vimeo, Twitch, TikTok, Spotify and Wistia. Migration guides map existing setups from Video.js 8, Mux Player, Plyr, Media Chrome, Vidstack and Video-React onto v10.

Features

• Editable skins: Full skins or individual controls installed as React and Tailwind CSS source.
• Presets: Video, audio, live video, live audio and background video configurations.
• Skin variants: Default, neutral, compat and scaffold styles for each preset.
• Media adapters: HLS, DASH, Mux, Cloudflare, YouTube, Vimeo, Twitch, TikTok, Spotify and more.
• UI components: Play, mute, seek, captions, playback rate, AirPlay and cast buttons, time and volume sliders, menus, tooltips and dialogs.
• Playback features: Captions, quality selector, thumbnail previews, picture-in-picture, keyboard shortcuts, gestures and internationalization.
• App templates: Install guidance for Next.js, Vite, TanStack Start, React Router, Astro and Laravel.
• Agent tooling: npx @videojs/cli agents init --method shadcn prints version-matched install instructions for coding agents.

Tech stack

• React (@videojs/react) or HTML custom elements (@videojs/html)
• Tailwind CSS or plain CSS
• shadcn registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @videojs/component-name