Skip to content
A React video player facilitating adaptive stream playback with custom UI and a React-friendly API.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github/ISSUE_TEMPLATE
__mocks__
flow-typed
public
src
typescript-declarations
.babelrc
.eslintrc
.flowconfig
.gitignore
LICENSE
README.md
doczrc.js
package.json
postcss.config.js
yarn.lock

README.md

Replay

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

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.

You can’t perform that action at this time.