djm-1/replay

A React video player facilitating adaptive stream playback with custom UI and a React-friendly API.

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.

Full feature list

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

Development 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.