https://github.com/vimond/replay
A React video player facilitating adaptive stream playback with custom UI and a React-friendly API.
https://github.com/vimond/replay
adaptive-streaming hls mpeg-dash react reactjs
Last synced: 4 months ago
JSON representation
A React video player facilitating adaptive stream playback with custom UI and a React-friendly API.
- Host: GitHub
- URL: https://github.com/vimond/replay
- Owner: vimond
- License: apache-2.0
- Created: 2019-02-21T13:12:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-04-16T08:09:31.000Z (about 1 year ago)
- Last Synced: 2025-11-01T00:16:12.293Z (7 months ago)
- Topics: adaptive-streaming, hls, mpeg-dash, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 248 MB
- Stars: 225
- Watchers: 24
- Forks: 25
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - vimond/replay - A React video player facilitating adaptive stream playback with custom UI and a React-friendly API. (JavaScript)
- awesome-video - vimond/replay - A React video player facilitating adaptive stream playback with custom UI and a React-friendly API. - vimond/replay (Video Players & Playback Libraries / Frameworks & UI Components)
- awesome-video - replay - A React video player facilitating adaptive stream playback with custom UI and a React-friendly API. (Players)
README
Replay is a **Re**act video **play**er with these key characteristics:
* Ready-to-use component.
* Custom and customisable player controls and UX.
* Enables adaptive streaming, thanks to [HLS.js](https://github.com/video-dev/hls.js) and [Shaka Player](https://github.com/google/shaka-player) integrations.
* One consistent and React-friendly API across all streaming technologies.
### Capabilities at a glance
* MPEG-DASH, HLS, progressive MP4/WebM playback.
* In-stream and side-loaded subtitles. Selector controls for subtitles and audio tracks.
* Common player controls: play/pause, volume, mute, timeline, skip back button, fullscreen.
* Live/DVR playback with timeshifting controls.
* Advanced player controls: Picture-in-picture, AirPlay, bitrate (quality) selector.
* Keyboard shortcuts and tab navigation.
* Remembering the user's volume and language preferences.
* Responsive player sizing and UI adaptation.
* Touch- and mobile-friendly UX.
[Full feature list](https://vimond.github.io/replay/#/#features-list)
## Getting started
### Prerequisites
Minimum React version for Replay is 16.6. Additionally, one component, the [CompoundVideoStreamer](https://vimond.github.io/replay/#/advanced-playback/adaptive-streaming#enabling-playback-for-multiple-streaming-technologies-based-on-stream-technology-resolution), requires your script bundler to support dynamic `import()` statements. This only applies if this component is actually inserted in your code.
### Inserting Replay into your React app
#### Installing the Replay npm package
```sh
npm install vimond-replay --save
```
#### Importing dependencies
```javascript
import React from 'react';
import { Replay } from 'vimond-replay';
import 'vimond-replay/index.css';
```
The last CSS `import` statement might be substituted with your desired CSS inclusion mechanism, e.g. SASS.
#### Rendering the Replay player with a progressive video source (MP4 file)
```jsx
class MyAppView extends React.Component {
render() {
return (
);
}
}
```
Flow and TypeScript static type annotations/declarations are provided for the Replay component.
### Next steps
* [More insert options](https://vimond.github.io/replay/#/advanced-playback/adaptive-streaming)
* [Playing DASH or HLS streams](https://vimond.github.io/replay/#/advanced-playback/adaptive-streaming)
* [Configuring Replay](https://vimond.github.io/replay/#/custom-replay/configuration)
* [Custom skins](https://vimond.github.io/replay/#/custom-replay/skins-styles)
* [Full documentation with live examples](https://vimond.github.io/replay/)
## Working with the source code
### Project setup
[Development setup](https://vimond.github.io/replay/)
### Technologies & patterns used & applied
* [Flow](https://flow.org) static type annotations.
* [Jest](https://jestjs.io/) and [Enzyme](https://airbnb.io/enzyme/) unit and component testing.
* Automated code formatting with [Prettier](https://prettier.io/).
* [ESlint](https://eslint.org/) code quality checks.
* [PostCSS](https://postcss.org/) and [Babel](https://babeljs.io/) for builds/transpilations.
* [Docz](https://docz.site) documentation authoring and generation with live code examples displaying React components.
* [React.lazy](https://reactjs.org/blog/2018/10/23/react-v-16-6.html) and dynamic imports for splitting out heavy third party streaming dependencies.
* [React context API](https://reactjs.org/docs/context.html).
* ES2018/ES2019 language features.
## About
Replay is an open source initiative from [Vimond Media Solutions](https://vimond.com).
### License
Replay is released under the [Apache 2.0 License](https://github.com/vimond/replay/blob/master/LICENSE).
### Roadmap
See the [project milestones](https://github.com/vimond/replay/milestones).
### Authors
Replay is developed by Tor Erik Alræk.