[!IMPORTANT]
Video-React is in security-only maintenance. We'll merge priority security patches until January 2028, and nothing else. Mux, which maintains Video-React, now works on Video.js 10 together with the teams behind Video.js, Vidstack, Plyr, and Media Chrome.
- Migrate to Video.js 10: follow the Migrate from Video-React guide. It maps
Playerprops, control bar children, the player ref, and Redux state to@videojs/react.- With a coding agent: paste the prompt from the guide's AI Quickstart section into your agent.
- Questions: videojs/v10 discussions
- Security reports: SECURITY.md
Video.React is a web video player built from the ground up for an HTML5 world using React library.
Install video-react and peer dependencies via NPM
npm install --save video-react react react-dom
import css in your app or add video-react styles in your page
import '~video-react/dist/video-react.css'; // import css
or
@import '~video-react/styles/scss/video-react'; // or import scss
or
<link
rel="stylesheet"
href="https://video-react.github.io/assets/video-react.css"
/>
Import the components you need, example:
import React from 'react';
import { Player } from 'video-react';
export default props => {
return (
<Player>
<source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
</Player>
);
};
| Browser | Windows | Mac | Linux | Android | iOS |
|---|---|---|---|---|---|
| Chrome | Y | Y | Y | Y | Native |
| Firefox | Y | Y | Y | untested | Native |
| Edge | Y | - | - | - | - |
| IE 11 | untested | - | - | - | - |
| Safari | - | Y | - | - | Y |
Please note that only the latest stable version is tested and supported. Video-react may be usable in older releases, and we will accept pull requests for them, but they will not be frequently tested or actively supported.
For the items marked as "untested", we do welcome volunteer testers.
Run tests:
npm test
$ npm install
$ npm start
Video-React only accepts security fixes. Please read the contribution guide, and report vulnerabilities as described in SECURITY.md.
- This project is heavily inspired by video.js, and most of our css styles came from video.js's styles.
- The document site is built with reactstrap.
- All the icons came from Google Material Icons
- Fonts were built by iconmon.