@nightco/replay
v1.0.9
Published
React video player with adaptive streaming support
Downloads
395
Readme
Replay is a React video player with these key characteristics:
- Ready-to-use component.
- Custom and customisable player controls and UX.
- Enables adaptive streaming, thanks to HLS.js and 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.
Getting started
Prerequisites
Minimum React version for Replay is 16.6. Additionally, one component, the CompoundVideoStreamer, 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
npm install vimond-replay --save
Importing dependencies
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)
class MyAppView extends React.Component {
render() {
return (
<Replay source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/>
);
}
}
Flow and TypeScript static type annotations/declarations are provided for the Replay component.
Next steps
- More insert options
- Playing DASH or HLS streams
- Configuring Replay
- Custom skins
- Full documentation with live examples
Working with the source code
Project setup
Technologies & patterns used & applied
- Flow static type annotations.
- Jest and Enzyme unit and component testing.
- Automated code formatting with Prettier.
- ESlint code quality checks.
- PostCSS and Babel for builds/transpilations.
- Docz documentation authoring and generation with live code examples displaying React components.
- React.lazy and dynamic imports for splitting out heavy third party streaming dependencies.
- React context API.
- ES2018/ES2019 language features.
About
Replay is an open source initiative from Vimond Media Solutions.
License
Replay is released under the Apache 2.0 License.
Roadmap
See the project milestones.
Authors
Replay is developed by Tor Erik Alræk.