# About this player

This player is built with Video.js, the open-source video player for HTML and React.

## What is Video.js?

Video.js is the open-source video player for the web. It has been playing video on millions of sites since 2010, and today it ships as web components for HTML and as components for React. It makes web video easy, performant, accessible, and customizable.

Video.js is built at Mux by the teams behind Video.js, Plyr, Vidstack, and Media Chrome, with contributions from engineers across other player projects.

## Why Video.js?

The native `<video>` tag is enough for a short clip that plays without controls. Once viewers control playback, the gaps show up quickly.

- **Adaptive streaming.** HLS plays natively in Safari and in a few mobile browsers. DASH plays natively nowhere. Everywhere else needs a JavaScript playback engine on top of Media Source Extensions, and a way to swap engines when the source changes.
- **Consistent controls.** Chrome, Safari, and Firefox each draw their own controls. You can hide them, but you can’t restyle or rearrange them.
- **Captions, quality, speed, and chapters.** The browser gives you no menu to pick text tracks, no quality selector, no playback speed control, and no chapter markers.
- **Accessibility.** Keyboard shortcuts, focus management, screen reader labels, and reduced-motion preferences are on you the moment you replace the native controls.
- **Everything else.** Thumbnail previews, live stream UI, AirPlay and Chromecast, error recovery, playback analytics, and sources like YouTube, Vimeo, or Mux each need their own wiring.

Video.js ships each of those as a component, so you take the ones you need and keep the rest of the web platform. Read more: [Why Video.js?](https://videojs.org/docs/guides/why-videojs)

## Build one yourself

Here’s a basic video player you can build with Video.js:

**index.html**

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>

<video-player>
  <video-skin>
    <video src="/video.mp4" playsinline></video>
  </video-skin>
</video-player>
```

**MyPlayer.tsx**

```tsx
import '@videojs/react/video/skin.css';
import { Video, VideoPlayer, VideoSkin } from '@videojs/react/video';

export function MyPlayer({ src }: { src: string }) {
  return (
    <VideoPlayer>
      <VideoSkin>
        <Video src={src} playsInline />
      </VideoSkin>
    </VideoPlayer>
  );
}
```

If you want to dive deeper, get started with our [installation guide](https://videojs.org/docs/guides/installation), which will guide you through generating a snippet that fits your use case.

- [Get started with Video.js](https://videojs.org/docs/guides/installation): Install Video.js and build your first player with streaming support and accessible controls

---

All documentation: https://videojs.org/llms.txt