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.
- 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.
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.
npm install vimond-replay --saveimport 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.
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.
- More insert options
- Playing DASH or HLS streams
- Configuring Replay
- Custom skins
- Full documentation with live examples
- 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.
Replay is an open source initiative from Vimond Media Solutions.
Replay is released under the Apache 2.0 License.
See the project milestones.
Replay is developed by Tor Erik Alræk.