A web video player built for the HTML5 world using React library.

Overview

video-react

npm version Build Status Package Quality codecov

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

Browser Windows Mac Linux Android iOS
Chrome Y Y Y Y Native
Firefox Y Y Y untested Native
Edge Y - - - -
IE 11 untested - - - -
Safari - Y - - Y

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

Comments
  • Manual playback time change through ControlBar doesn't work in Chrome

    Manual playback time change through ControlBar doesn't work in Chrome

    Description This bug when streaming or playing a local video happens in latest version of Google Chrome only. Including a ControlBar component in a video and trying to change playback time always resets the video to 00:00. This happens for both development and production builds.

    Steps to reproduce the behavior:

    1. Include ControlBar inside Player component and try to change playback time to any time offset
    2. Clicking or dragging the control bar's circle in order to jump to a time offset
    3. Video playback starts from the beginning

    Expected behavior Time offset follows the circle.

    Desktop

    • OS: Windows 10 build 1809
    • Browser: Google Chrome
    • Browser version: 72.0.3626.121
    • React version: 16.8.3
    • video-react version: 0.10.7 latest

    I haven't tested with older React and ReactDOM versions. Could possibly be source of the problem.

    Context This behavior is not present in latest version of Firefox. Video's time offset is appropriate to the interaction of the control bar.

    help wanted bug report 
    opened by dusandjovanovic 20
  • chore: Installing packages webpack@4 babel@7 rollup...

    chore: Installing packages webpack@4 babel@7 rollup...

    Summary

    test plan

    • [x] npm run test is running normally
    • [x] npm run build is running normally
    • [x] npm run build-docs is running normally
    • [x] npm start is running normally
    • [x] sh ./scripts/docs is running normally
    opened by xiaoyuhen 10
  • Allow the hosting App to provide the store for the player to use

    Allow the hosting App to provide the store for the player to use

    Addressing #80:

    • Exposed reducers, actions and action creators for client app to access
    • Fixed broken test
    • Prepared "Player" component to receive the store either through props or context
    • Now returning the unsubscribe function on Player's subscribeToStateChange function for consumers to kill subscription when required
    • Manager uses the provided store if supplied or creates it's own if not

    Hosting App now may:

    1. Provide store as a prop
        const store = createStore(...)
    ...
        render() {
          return (
            <Player poster="poster.png" store={store}>
              <source src="movie.mp4"/>
    
    
    1. Use context to provide the store to Player
    import { Provider } from 'react-redux'; // e.g. using react-redux
    
    class App extends React.Component {
      store = createStore(...)
      ...
      render() {
        return (
          <Provider store={this.store}>
              ...
          </Provider>
        );
      }
    }
    
    // Use normally. Player will read context and retrieve store
    const PlayerParent = (props) => (
            <Player poster="poster.png">
              <source src="movie.mp4"/>...
    

    PS.

    In regards to #80, after examining video-react's design more carefully, the dataflow is not strictly what might be expected from a conventional redux app and it would require a greater effort to indeed allow the hosting app to communicate through messages (without having to pass around the manager); Regardlessly, at least this is a start to allow the hosting App to share the store that the player uses and allow developers visibility of the messages that flow through the player's store.

    To clarify the dataflow point: for example, the action creator play is what actually triggers the play/pause to occur — and needs to be binded to the manager — instead of the play to be executed in reaction to subscribing to the store and reading player.paused to play or pause the video. It's like the store is always updated to reflect the state of the app but doesn't dictate the state of the app; at least not in all cases as far as I could see.

    opened by rart 10
  • Changing src in Hls.js source crashes video player

    Changing src in Hls.js source crashes video player

    Issue description

    • version 0.9.4
    • browser: Chome 63.0.3239.132 64-bits

    Steps to reproduce

    1. Make HLSSource Component as follows:
    import React, { PropTypes, Component } from 'react';
    import Hls from 'hls.js';
    
    export default class HLSSource extends Component {
      constructor(props, context) {
        super(props, context);
        this.hls = new Hls();
      }
    
      componentDidMount() {
        const { src, video } = this.props;
        if (Hls.isSupported()) {
          this.hls.loadSource(src);
          this.hls.attachMedia(video);
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            video.play();
          });
        }
      }
    
      render() {
        return (
          <source
            src={this.props.src}
            type={this.props.type || 'application/x-mpegURL'}
          />
        );
      }
    }
    
    1. In redux action change source based on selected item on list:
      componentDidUpdate(prevProps, prevState) {
          if (prevProps.channel && this.props.channel.streamUrl !== prevProps.channel.streamUrl) {
          this.refs.player.load();
        }
      }
    
      renderPlayer() {
        if(this.props.channel.streamUrl)
          return (
            <Player ref="player" autoPlay>
              <HLSSource isVideoChild src={this.props.channel.streamUrl} />
            </Player>
          )
      }
    
      render() {
        if (!this.props.channel) {
          return <div>Select a channel...</div>;
        }
    
        return (
          <div>
            <h2>{this.props.channel.name}</h2>
            <h3>Description: {this.props.channel.streamUrl}</h3>
            {this.renderPlayer()}
          </div>
        );
      }
    }
    

    Expected behaviour

    Player should update the source played at the moment and re-render

    Actual behaviour

    Video crashes on loading, timeline is stuck on same moment as previous video, but says: 0:00.

    opened by Siemko 10
  • HLS Source doesn't work

    HLS Source doesn't work

    Issue description

    • version #0.13.0
    • browser: chrome 69.0.3497.100

    Steps to reproduce issue

    Follow the guide: https://video-react.js.org/customize/customize-source/

    Steps to reproduce

    1. I copy pasted this class as I suppose it works (no knowledge on that)
    import React, { Component } from 'react';
    import Hls from 'hls.js';
    
    export default class HLSSource extends Component {
      constructor(props, context) {
        super(props, context);
        this.hls = new Hls();
      }
    
      componentDidMount() {
        const { src, video } = this.props;
        if (Hls.isSupported()) {
          this.hls.loadSource(src);
          this.hls.attachMedia(video);
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            video.play();
          });
        }
      }
    
      render() {
        return (
          <source
            src={this.props.src}
            type={this.props.type || 'application/x-mpegURL'}
          />
        );
      }
    }
    
    1. Import and wrap it with the Player component
    <Player fluid={false} width={640} height={480}>
       <HLSSource
          isVideoChild
           src="http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8"
        />
    </Player>
    
    1. npm start

    Expected behaviour

    It should read .m3u8 content

    Actual behaviour

    It doesn't, loading screen loop

    Demo

    Here is the code sandbox as it is more explicit https://codesandbox.io/s/l2k5ql01ol

    can't reproduce 
    opened by Mueslint 9
  • IE 11 crashes with

    IE 11 crashes with "SCRIPT16385: Not implemented" error when video-react sets preload attribute

    Issue description

    • version: Video-React #0.9.2
    • browser: Internet Explorer 11.0.9600.17416 on Windows Server 2012 R2

    Steps to reproduce issue

    1. Instantiate the Player component by rendering as follows ("/api/get-video/13/" is an API that returns a short video file):
        <Player src={`/api/get-video/13/`}>
          <ControlBar>
            <CurrentTimeDisplay order={4.1} />
            <TimeDivider order={4.2} />
            <PlaybackRateMenuButton
              rates={[5, 2, 1, 0.5, 0.1, 0.05, 0.02, 0.01]}
              order={7.1}
            />
          </ControlBar>
        </Player>
    
    1. View the component in IE 11

    Expected behaviour

    The video player would appear and work fine, except for not supporting seeking (since the video source is not a local file or streaming connection). This is what happens in Google Chrome.

    Actual behaviour

    The browser window crashes and displays a blank page. Debugging in developer tools shows that the crash is due to a "SCRIPT16385: Not implemented" error when video-react sets the "preload" attribute to "auto"

    Demo

    A sample page to show what happens in Internet Explorer when the preload attribute is set: http://stylebites.de/fp5/preload.html

    opened by joel-s 9
  • When Video Loading, LoadSpinner not visible, BigPlay is visible

    When Video Loading, LoadSpinner not visible, BigPlay is visible

    Hi there, hope this finds you well

    Issue description

    I have users loading long videos - 45 minutes to 1.5hrs. When the video is still loading, the BigPlayButton appears & user can click it. The LoadSpinner does not appear. Because the video is not ready to play, an error occurs

    • version #0.8.9
    • browser: Chrome, Firefox, Safari

    Steps to reproduce issue

    Just load with an mp4that takes a along time to load and hit BigPlayButton. Make sure you have

    Expected behaviour

    LoadingSpinner should appear until video is ready to be played, then BigPlayButton should replace it

    Actual behaviour

    BigPlayButton appears immediately AND is ready for user to click on it.

    -- Thank you, Paola

    opened by paolavness 9
  • change source url not work

    change source url not work

    i want to change player url ,i use setState to change source url but player still play old url

    • version # 0.3.3

    here is my code

    import React from 'react';
    
    import "../../../node_modules/video-react/dist/video-react.css";
    import './index.css'
    import { Player, ControlBar, ReplayControl,
      ForwardControl, CurrentTimeDisplay,
      TimeDivider, PlaybackRate
    } from 'video-react';
    
    import Selections from './Selections'
    
    export default class VideoPlayer extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          playUrl: "http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4"
        }
        this.changeUrl = this.changeUrl.bind(this)
      }
      handleClick(){
        this.props.navigator.pushPage({component: Main, key: "Main_page"});
      }
      changeUrl(url) {
        this.setState({playUrl: url})
      }
      render() {
        return (
          <Page>
            <div style={styles.videoTitle}>{this.props.title}</div>
            <Player poster="/assets/poster.png" >
              <source
               src={this.state.playUrl}/>
              <ControlBar>
                <ReplayControl disabled />
                <ForwardControl seconds={30} />
                <CurrentTimeDisplay order={4.1} />
                <TimeDivider order={4.2} />
                <PlaybackRate rates={[1, 1.25, 1.5, 2]} order={7.1} />
              </ControlBar>
            </Player>
            <Selections changeUrl={this.changeUrl}/>
          </Page>
        );
      }
    }
    
    VideoPlayer.defaultProps = {
      title: 'test',
    }
    
    

    when i fire changeUrl event , url changed but player still play previous url

    Expected behaviour

    when i fire changeUrl event , url changed and player play new url

    opened by jobn123 8
  • avoid css conflict by stalying class instead of button elemnt

    avoid css conflict by stalying class instead of button elemnt

    The .video-react button style is creating CSS conflict when I try to create custom controls with my own UI library. Instead of styling the <button> element I styled the video-react button class (which was already used in other places).

    Edit: just applied the same fix for <ul> elements

    opened by ChristopheBougere 7
  • Untranspiled output was published to npm for version 0.13.3

    Untranspiled output was published to npm for version 0.13.3

    Describe the bug The package output in lib/* are basically the same as the one in src/*.

    To Reproduce Steps to reproduce the behavior: Checkout the published package in npm and open the files in lib folder.

    Expected behavior A transpiled version of the source code that can be run without any transpiler.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information): Any

    Additional context Add any other context about the problem here.

    bug 
    opened by skyuplam 7
  • Not reloading when changing url with state

    Not reloading when changing url with state

    Hi, Im giving url to the Player from state but i want when i change the state , the Player do not reload itself and just play the video from the new url.

    • I did this for securing my video
    • The url changes every 30 seconds
    • the video is same just url has changed

    Here is my code :

    class Lesson extends React.Component {
      state = {
        time: 0,
      }
      generateSecret = (time) => {
        //some code for generating secret 
      }
      componentDidMount() {
        this.interval = setInterval(() => {
          this.setState({time: new Date().getTime()});
        }, 10000);
      }
      render(){
        return( 
          <Player src={'http://localhost:8585/video/' + this.generateSecret(this.state.time)}>
            <BigPlayButton position="center" />
          </Player>
        )
      }
    }
    

    Any help regarding this would be helpful

    question 
    opened by mahdidavoodi7 7
  • Add changelog for 0.15.0

    Add changelog for 0.15.0

    Describe the bug

    The CHANGELOG.md currently goes up to 0.14.1 (including on the 0.15.0 tag), but the current latest NPM package is 0.15.0.

    To Reproduce Steps to reproduce the behavior:

    1. Visit the changelog file

    Expected behavior

    Can you please add info on what changed between those versions for folks who would like to upgrade to the latest version?

    bug report 
    opened by mrcoles 0
  • Error while trying to use MouseTimeDisplay

    Error while trying to use MouseTimeDisplay

    So, I'm trying to use MouseTimeDisplay , but getting this error. Can't figure out what's the problem is. Neither could I find the fix in documentations. Any ideas?

    image

    bug report 
    opened by shotaKvitsashvili 1
  • 后续会支持Dart Sass 2.0.0语法变化吗?

    后续会支持Dart Sass 2.0.0语法变化吗?

    DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

    Recommendation: math.div($video-react-big-play-button-height, 2)

    More info and automated migrator: https://sass-lang.com/d/slash-div ╷ 30 │ margin-top: -($video-react-big-play-button-height / 2);

    bug report 
    opened by hwxy 1
Releases(0.15.0)
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Jan 8, 2023
Video.js - open source HTML5 & Flash video player

Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

Video.js 34.8k Jan 5, 2023
The HTML5 video player for the web

Flowplayer website | demos | docs For the impatient Download Flowplayer Unzip Drop the folder under your server Minimal setup <!DOCTYPE html> <head>

Flowplayer 1.9k Dec 30, 2022
SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

WordPress-Plugin-SrsPlayer SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc. Usage First, you should get your own video stream

ossrs 3 Jul 27, 2022
SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

ossrs 12 Oct 15, 2022
Accessible HTML5 Video Player

Accessible HTML5 Video Player What is it? A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For de

PayPal 2.4k Jan 5, 2023
AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.

Documentation • Examples • Tutorials • Support Us • Get Professional Help AmplitudeJS is a lightweight JavaScript library that allows you to control t

Server Side Up 3.9k Jan 2, 2023
Music-Player - Music player application built with HTML, CSS and vanilla JavaScript

Music-Player Music player application built with HTML, CSS and vanilla JavaScrip

Karthik Umashankar 1 Feb 10, 2022
This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library included.

Aim-Player This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library incl

Aim Mikel 2 Jun 27, 2021
A high-performance, interactive and customizable video player control, built upon Reanimated v2 & GestureHandler v2

`JSThread` to `JSThread`, `UIThread` to `UIThread`. React Native Reanimated Expo Player 100% written in Typescript video player component, interaction

Alan Toa 58 Jan 4, 2023
A Node JS Express/Serverless demo application that creates a slideshow video using the Pexels image library and Shotstack video editing API.

Shotstack Pexels Slideshow Video Demo This project demonstrates how to use the Shotstack cloud video editing API to create a video using an HTML form

Shotstack 25 Dec 9, 2022
An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player.

Stem Player Online An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player. https://stemplayeronline.com See the proj

Luke Weiler 23 Nov 13, 2022
Movie focused HTML5 Player

Movie focused HTML5 Player

Bruno Vieira 1.6k Dec 29, 2022
A simple HTML5, YouTube and Vimeo player

Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. Checkout the demo - Do

Sam Potts 23.1k Jan 3, 2023
HTML5 fmp4 live stream (ll-fmp4) player written in TypeScript

umataste HTML5 fmp4 live stream (ll-fmp4) player written in TypeScript Feature Playback for fmp4 stream Extremely low latency of less than 0.1 second

もにょ~ん 5 Oct 21, 2022
Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> support, customize control panel will become a piece of cake. <msc-ez-video /> adopts CSS custom properties, developers could style them as they want.

Paul 1 Dec 29, 2021
Custom full screen video player

Video Player Native video player in html View Demo · Report Bug · Request Feature About The Project This is a custom video player for the web built on

Oscar Castaneda ⬢ 5 Feb 3, 2022
a video player framework aims to bring wonderful experience on browser

Chimee English | 中文 Introduction Chimee is a web video player created by the Qiwoo Team. It's based on the web video element. It supports multiple med

ChimeeJS 2.4k Dec 22, 2022
Video Player

aksVideoPlayer.js Video Player View the Demo on CodePen → Getting Started Compiled and production-ready code can be found in the dist directory. 1. In

Ahmet Aksungur 5 Oct 22, 2021