# video.js — Open-Source HTML5 Video Player Framework

> An open-source HTML5 video player framework that delivers consistent cross-browser playback with a plugin-based architecture and adaptive streaming support.

## Install

Save as a script file and run:

# video.js — Open-Source HTML5 Video Player Framework

## Quick Use
```bash
npm install video.js
```
```html
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
  <source src="video.mp4" type="video/mp4" />
</video>
<script>
  var player = videojs('my-video');
</script>
```

## Introduction
video.js is an open-source HTML5 video player built for the modern web. Created in 2010, it normalizes playback behavior across browsers and devices while exposing a rich plugin API for custom functionality.

## What video.js Does
- Delivers consistent HTML5 video playback across all major browsers and platforms
- Supports adaptive streaming formats including HLS and DASH out of the box
- Provides a skinnable, accessible player UI with keyboard and screen reader support
- Offers a plugin architecture with hundreds of community-maintained extensions
- Handles text tracks for subtitles, captions, chapters, and metadata

## Architecture Overview
video.js wraps the native HTML5 video element in a JavaScript abstraction layer. The core manages a component tree for UI, an event bus for lifecycle hooks, and a tech layer that abstracts the playback engine. Plugins register through a central API and can extend or replace any part of the player.

## Self-Hosting & Configuration
- Install via npm or include from the jsDelivr / cdnjs CDN
- Import both the CSS (`video.js/dist/video-js.css`) and JS in your page or bundler
- Configure with options like `autoplay`, `controls`, `fluid`, `responsive`, and `playbackRates`
- Register plugins with `videojs.registerPlugin()` and activate per player instance
- Override default skin classes prefixed with `.vjs-` to match your design system

## Key Features
- Framework-agnostic: integrates with React, Vue, Angular, or plain HTML
- Built-in VHS (Video.js HTTP Streaming) handles HLS and DASH without extra libraries
- Middleware API for intercepting and transforming playback requests
- Responsive and fluid layout modes adapt to any container size
- Localization support with community-contributed language packs

## Comparison with Similar Tools
- **Plyr** — Lighter weight but fewer plugins and no middleware API
- **hls.js** — Streaming-only library without player UI or plugin ecosystem
- **Shaka Player** — Google-backed with strong DRM focus; less plugin variety than video.js
- **MediaElement.js** — Legacy Flash fallback design; video.js is fully HTML5-native
- **JW Player** — Commercial product with limited free tier; video.js is Apache-2.0 licensed

## FAQ
**Q: Does video.js handle live streaming?**
A: Yes. The bundled VHS plugin supports HLS and DASH live and DVR streams without additional setup.

**Q: Can I use video.js in a React project?**
A: Yes. Initialize the player inside a `useEffect` hook and call `player.dispose()` on unmount to prevent memory leaks.

**Q: Is video.js free for commercial projects?**
A: Yes. It is released under the Apache 2.0 license with no usage restrictions.

**Q: How do I add pre-roll ads?**
A: Use the `videojs-contrib-ads` plugin, which integrates with VAST, VPAID, and Google IMA ad SDKs.

## Sources
- https://github.com/videojs/video.js
- https://videojs.com/guides


---
Source: https://tokrepo.com/en/workflows/asset-56024e76
Author: Script Depot