video-react

Video.React is a web video player built from the ground up for an HTML5 world using React library.

Installation

Install video-react and peer dependencies via NPM

npm install --save video-react react react-dom

import css in your app or add video-react styles in your page

import '~video-react/dist/video-react.css'; // import css

or

@import '~video-react/styles/scss/video-react'; // or import scss

or

<link
  rel="stylesheet"
  href="https://video-react.github.io/assets/video-react.css"
/>

Import the components you need, example:

import React from 'react';
import { Player } from 'video-react';

export default props => {
  return (
    <Player>
      <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
    </Player>
  );
};

Browser support

Please note that only the latest stable version is tested and supported. Video-react may be usable in older releases, and we will accept pull requests for them, but they will not be frequently tested or actively supported.

For the items marked as "untested", we do welcome volunteer testers.

Development

Run tests:

npm test

Run from local

$ npm install
$ npm start

Contribution

Interested in making contribution to this project? Want to report a bug? Please read the contribution guide.

Inspiration & Credits

• This project is heavily inspired by video.js, and most of our css styles came from video.js's styles.
• The document site is built with reactstrap.
• All the icons came from Google Material Icons
• Fonts were built by iconmon.

0.16.0 (2022-11-09)

0.14.1 (2019-07-24)

Bug Fixes

• bad seek time on iOS safari (19efac4)

0.14.0 (2019-06-21)

Features

• New ClosedCaptionButton component (6bea3a1)

0.13.9 (2019-06-18)

• fullscreen events are no longer shared across players (#285) (986d844)

0.13.8 (2019-06-12)

Bug Fixes

• re-focus to root element when switching fullscreen (#276) (3e38a7f)

0.13.7 (2019-05-02)

Bug Fixes

• add tabindex to video tag to make it focusable in latest Chrome (#262) (01291c7)

Features

• expose MenuButton (ed835a2)

0.13.6 (2019-03-18)

Bug Fixes

• removed a dubious player state setting that caused LoadSpinner invisible problem (363a659)
• Slider: remove event listeners when component will unmount (17baf50)

0.13.5 (2019-03-13)

Bug Fixes

• add missing '@babel/runtime' dependencies (7ff1036)

0.13.4 (2019-03-10)

Features

• Customizable delay time for auto hide of ControlBar #233

Bug Fixes

• Missing commonjs support (#235)

0.13.3 (2019-03-02)

Bug Fixes

• fix preload prop in Player (#230)

0.13.2 (2019-01-11)

Bug Fixes

• Fixed className propagation problem (5a169cd), closes #186

0.13.1 (2018-10-29)

0.13.0 (2018-07-07)

0.12.0 (2018-07-06)

Bug Fixes

• Build dist before build docs (85a11dd)

0.11.2 (2018-06-07)

Bug Fixes

• Build dist before build docs (85a11dd)

0.11.1 (2018-06-07)

Bug Fixes

• Fixed clickable issue (9a9a218)

0.11.0 (2018-06-07)

Features

• Add property to disable click for shortcut #101 (e29aee8), closes #122

0.10.9 (2018-05-23)

Hotfix for 0.10.8

0.10.8 (2018-05-23)

117 Don't import scss in the js code

v0.10.7

110 Allow to render tooltip with custom text by Sergo(@rogaldh)

0.10.5 (2018-04-24)

105 Fix classnames overridden by props in volume bar by (Jordan Belford)

0.10.4 (2018-03-19)

• Fixed #99 Cannot read property 'paused' of undefined

0.10.3 (2018-03-16)

0.10.2 (2018-03-16)

Fixed #97: Uncaught ReferenceError: babelHelpers is not defined

0.10.1 (2018-03-15)

• Merged PR #81 by Roy Art(@rart): Allow the hosting App to provide the store for the player to use
• Merged PR #92 by Chase Maier(@chasemaier): Add type="button" to prevent form submit
• Merged PR #85 by Anton Kulakov(@kulakowka): Fixed typo in Player.js
• Merged PR #64 by Mihail Smolin(@Soulfull): fix remove event listener
• Improvement: Ability to set element id #90

0.9.4

• Fixed Promise error #68
• Fixed Loading spinner issue

0.9.3

• Fixed #63: When Video Loading, LoadSpinner not visible, BigPlay is visible

0.9.2

• Fixed IE11 issue
• Fixed throttle issue

0.9.1

Fixed fonts path issue in css

0.9.0

• Using rollup to compile js
• Using nextjs to build doc site
• Fixed #60 - npm warnings with react v16
• Merged PR #64 - fix remove event listener

0.8.10 (2017-11-16)

Fixed #54 unable to resolve redux module

0.8.9 (2017-10-19)

Fixed #52 Uncaught DOMException user performs seek operations when the video state waiting is true Do not pause while seeking

0.8.8 (2017-09-08)

Fixed #49 Video-React does not support IE Fixed #48 ControlBar className from property doesnt appear

0.8.6 (2017-07-22)

Fixed #41 BigPlayButton Arrests Keyboard

0.8.5 (2017-06-08)

Add option to always show volume control #38 by Alex Koppel (@arsduo)

0.8.4 (2017-06-06)

Add crossOrigin prop to Video PR#37 by Juan D.(@juandjara)

0.8.3 (2017-05-01)

Add an example on how to add a download button component.

0.8.2 (2017-04-24)

0.8.1 (2017-04-24)

• Upgrade for React 15.5
• Add className property for components #22
• Add style node to pakcage.json #29

0.7.8 (2017-04-17)

Fixed #29

0.7.7 (2017-04-14)

Fixed Tests

0.7.6 (2017-04-14)

Calling VideoReact from outside (HTML script tag)

0.7.5 (2017-04-11)

Fixed IE11 Issue by @yuheiy's help.

0.7.3 (2017-03-10)

NO CHANGES Test travis-ci, use it to publish new release

[0.7.2]

Fixed issue that the player can't handle blur event

0.7.0 (2017-02-20)

• Rewrited Menu component.
• Changed component name from PlaybackRate to PlaybackRateMenuButton.
• Fixed full screen bug on iPhone.
• Added travis-ci config

0.6.4 (2017-02-12)

Fixed issue #11 Make sure the children of Video can get video object

0.6.3 (2017-02-11)

Fixed issue #8 Spinner + Play Both Apear when no source Merged #9 Display LoadingSpinner.js only if the player has started Fixed tests

0.6.2 (2017-01-19)

Fixed issue #7. muted={false} not working

0.6.1 (2017-01-19)

• Add more methods to control the video for the Player component
• Add the subscribeToStateChange method to subscribe the state changes
• Update the document
• Add an example on how to control the player from outside.

0.5.1 (2016-12-02)

• New features:
  • Support keyboard navigation
  • Click video to play or pause
• Fixed the conflict of scss with other's

0.4.4 (2016-11-29)

• Using base64 string for fonts in scss

0.4.3 (2016-11-24)

• Shortcut only works when the play has focus
• Using isVideoChild prop to check if an element belongs to the Video.
• Add documents for Customize
• Add an example on how to support HLS video source

0.4.2 (2016-11-24)

• Fixed source issue
• Move redux to peerDependencies
• Add play(), pause(), load(), addTextTrack(), canPlayType() methods to player.
• Add example for Shortcut component
• Add example for Player

0.4.1 (2016-11-23)

• Using redux to manage state
• Add playsInline property

0.3.3 (2016-11-21)

• Fixed VolumeMenu issue that it's vertical property did not work
• Added autoPlay, startTime properties for Player Component

0.3.2 (2016-11-19)

Fixed Issue #2: The mouse and control bar do not disappear when it's in fullscreen mode

0.3.1 (2016-11-18)

• Added keyboard shortcuts
• Display bezel icon for some keyboard operations
• Fixed some issues
• Remove supports for React v0.14

0.2.4 (2016-11-15)

• Filter children by disabled property.
• Inherit props from default component
• remove ninon from dependencies

0.2.1 (2016-11-13)

• New components:
  • CurrentTimeDisplay
  • DurationDisplay
  • RemainingTimeDisplay
  • TimeDivider
  • VolumeMenuButton
  • PlaybackRate
• New example on how to customize

0.0.2

• Copy the project settings from reactstrap
• Add new tests and new components

Features

• Player: Player is the root component of the Video-React player. All the others components should be in this component.
• Video: Video is the React component for Html5 video, it renders the Html5 video element to embed a video. It also is the container for all video sources. If there are more then one source, it could be failed back.
• LoadingSpinner: There would be a loading spinner to display before the video is loaded.
• BigPlayButton: Initial play button. Shows before the video has played. The hiding of the big play button is done via CSS and player states.
• PosterImage: The PosterImage specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.