Video.js v10 is currently in beta . The API may change before the stable release.
React quickstart Use @videojs/react to build players with composable React components and hooks.
Install the package
npm install @videojs/react
Create your player component
Create a new file for your player. Call createPlayer with a feature bundle to get a typed Player object that contains the Provider, Container, and a usePlayer hook scoped to that player instance. 'use client' ; import '@videojs/react/video/skin.css' ; import { createPlayer } from '@videojs/react' ; import { Video , VideoSkin , videoFeatures } from '@videojs/react/video' ; const Player = createPlayer ({ features: videoFeatures }); interface MyPlayerProps { src : string ; } export const MyPlayer = ({ src } : MyPlayerProps ) => { return ( < Player.Provider > < VideoSkin > < Video src = { src } playsInline /> </ VideoSkin > </ Player.Provider > ); };
The 'use client' directive is required for Next.js App Router. Omit it for Vite, Remix, or other setups that don’t use React Server Components.
Use the player in your app
Import and render your player component anywhere in your app: import { MyPlayer } from '../components/player' ; export default function Page () { return ( < MyPlayer src = "https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" /> ); }
Play an HLS stream (optional)
To stream with HLS, swap Video for HlsVideo from the media subpath. The feature bundle and skin stay the same: 'use client' ; import '@videojs/react/video/skin.css' ; import { createPlayer } from '@videojs/react' ; import { VideoSkin , videoFeatures } from '@videojs/react/video' ; import { HlsVideo } from '@videojs/react/media/hls-video' ; const Player = createPlayer ({ features: videoFeatures }); export const MyPlayer = ({ src } : { src : string }) => { return ( < Player.Provider > < VideoSkin > < HlsVideo src = { src } playsInline /> </ VideoSkin > </ Player.Provider > ); };
HTML quickstart Use @videojs/html to build players with framework-free custom elements that work in any web environment.
Install the package
npm install @videojs/html
Register the custom elements
Import the side-effect modules that register the custom elements, and import the skin CSS: import '@videojs/html/video/player' ; import '@videojs/html/video/skin' ; import '@videojs/html/video/skin.css' ;
Each import registers one custom element. The /video/player module registers <video-player>, /video/skin registers <video-skin>.
Add the player markup
< video-player > < video-skin > < video slot = "media" src = "https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline ></ video > </ video-skin > </ video-player >
The slot="media" attribute tells the player which element is the media source. Always include it on your <video>, <audio>, or custom media element.
Play an HLS stream (optional)
To use adaptive HLS streaming, add the hls-video import and swap the media element: import '@videojs/html/video/player' ; import '@videojs/html/video/skin' ; import '@videojs/html/video/skin.css' ; import '@videojs/html/media/hls-video' ;
< video-player > < video-skin > < hls-video slot = "media" src = "https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" playsinline ></ hls-video > </ video-skin > </ video-player >
Add the script and stylesheet
Load the player and skin from the CDN. No build step required: <! doctype html > < html lang = "en" > < head > < meta charset = "UTF-8" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video/skin.css" /> </ head > < body > < video-player > < video-skin > < video slot = "media" src = "https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline ></ video > </ video-skin > </ video-player > < script type = "module" src = "https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video/player.js" ></ script > </ body > </ html >
Play an HLS stream (optional)
Add the HLS script to enable adaptive streaming: < script type = "module" src = "https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video/player.js" ></ script > < script type = "module" src = "https://cdn.jsdelivr.net/npm/@videojs/html/cdn/media/hls-video.js" ></ script >
< video-player > < video-skin > < hls-video slot = "media" src = "https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" playsinline ></ hls-video > </ video-skin > </ video-player >
Next steps
Architecture overview Understand how state, UI, and media layers fit together.
React guide Explore presets, skins, hooks, and advanced React patterns.
HTML guide Explore presets, skins, custom elements, and HTML patterns.
Presets Learn about the built-in /video, /audio, and /background presets.
