FrameworkStyle

Installation

Get started with Video.js v10 by choosing your framework, styles, skin, and media renderer

Welcome to Video.js v10! This guide will help you get up and running. In it, you’ll make three key choices:

  1. Framework - React or HTML (vanilla JavaScript)
  2. Skin - The pre-built UI design you’ll use, and how it’s applied in your project
  3. Renderer - The component that displays your media

1. Pick Your Framework

Video.js v10 supports both React and vanilla JavaScript/HTML through Web Components.

First, select your preferred framework in the framework selector at the top of the page.

Then, install the appropriate package, taking care to use the @next dist. 

npm install @videojs/react@next

2. Pick Your Skin

Skins are packaged sets of UI components and styles. Video.js v10 includes two built-in skins:

  • Frosted - Modern glassy design with backdrop blur effects
  • Minimal - Clean, simple design with straightforward controls

Learn more about skins in the guide →

Currently, Video.js v10 uses CSS for styling these skins. More styling approaches (e.g, Tailwind CSS) are coming soon. 

import '@videojs/react/skins/frosted.css';
// or
import '@videojs/react/skins/minimal.css';

3. Pick Your Renderer

Media renderers display your video and audio content. For now, Video.js v10 includes <Video />, which supports MP4 and other natively-supported streams and <HlsVideo />, which supports HLS.

More renderers for formats like DASH, and services like YouTube and Vimeo are planned.

Basic Example 

import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';

export default function App() {
  return (
    <VideoProvider>
      <FrostedSkin>
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          poster="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.webp"
          playsInline
        />
      </FrostedSkin>
    </VideoProvider>
  );
}

That’s it! You now have a fully functional Video.js player. Go forth and play.

VideoJS