Installation
Install Video.js and build your first player with streaming support and accessible controls
Video.js is a React video player component library — composable primitives, hooks, and TypeScript types for building accessible, customizable players with minimal bundle size.
Video.js is an HTML video player built on custom elements — lightweight, framework-free components for building accessible, customizable players with minimal bundle size.
Answer the questions below to get started quickly with your first embed code.
Choose your JS framework
Video.js aims to provide idiomatic development experiences in your favorite JS and CSS frameworks. More to come. ( vote )[todo].
Choose your use case
The defaults work well for general website playback. More prebuilt players to come. ( vote )[todo]
Choose skin
Choose how your player looks.
Choose your media source type
Video.js supports a wide range of file types and hosting services. It’s easy to switch between them. ( missing something? )
Select your source
Or upload your media for free to Mux
Install Video.js
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@videojs/html@next/dist/default/define/video/player.js';
import 'https://cdn.jsdelivr.net/npm/@videojs/html@next/dist/default/define/video/skin.js';
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html@next/dist/default/define/video/skin.css" />npm install @videojs/html@nextpnpm add @videojs/html@nextyarn add @videojs/html@nextbun add @videojs/html@nextnpm install @videojs/react@nextpnpm add @videojs/react@nextyarn add @videojs/react@nextbun add @videojs/react@nextUse your player
<!--
The PlayerProvider passes state between the UI components
and Media, and makes fully custom UIs possible.
It does not have layout by default (display:contents)
-->
<video-player>
<!--
Skins contain the entire player UI and are easily swappable.
They can each be "ejected" for full control and customization
of UI components.
-->
<video-skin>
<!--
Media are players without UIs, handling networking
and display of the media. They are easily swappable
to handle different sources.
-->
<video slot="media" src="..."></video>
</video-skin>
</video-player>Create your player
Add it to your components folder in a new file.
import '@videojs/react/video/skin.css';
import { createPlayer, videoFeatures } from '@videojs/react';
import { VideoSkin, Video } 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} />
</VideoSkin>
</Player.Provider>
);
};Use your player
import { MyPlayer } from '../components/player';
export const HomePage = () => {
return (
<div>
<h1>Welcome to My App</h1>
<MyPlayer src="https://example.com/video.mp4" />
</div>
);
};That’s it! You now have a fully functional Video.js player. Go forth and play.
Something not quite right? You can submit an issue and ask for help, or explore other support options .