react-video-js-player

React wrapper for VideoJS. Live Demo

Install

npm install --save react-video-js-player

Usage

import React, { Component } from 'react';
import VideoPlayer from 'react-video-js-player';

class VideoApp extends Component {
    player = {}
    state = {
        video: {
            src: "http://www.example.com/path/to/video.mp4",
            poster: "http://www.example.com/path/to/video_poster.jpg"
        }
    }

    onPlayerReady(player){
        console.log("Player is ready: ", player);
        this.player = player;
    }

    onVideoPlay(duration){
        console.log("Video played at: ", duration);
    }

    onVideoPause(duration){
        console.log("Video paused at: ", duration);
    }

    onVideoTimeUpdate(duration){
        console.log("Time updated: ", duration);
    }

    onVideoSeeking(duration){
        console.log("Video seeking: ", duration);
    }

    onVideoSeeked(from, to){
        console.log(`Video seeked from ${from} to ${to}`);
    }

    onVideoEnd(){
        console.log("Video ended");
    }

    render() {
        return (
            <div>
                <VideoPlayer
                    controls={true}
                    src={this.state.video.src}
                    poster={this.state.video.poster}
                    width="720"
                    height="420"
                    onReady={this.onPlayerReady.bind(this)}
                    onPlay={this.onVideoPlay.bind(this)}
                    onPause={this.onVideoPause.bind(this)}
                    onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
                    onSeeking={this.onVideoSeeking.bind(this)}
                    onSeeked={this.onVideoSeeked.bind(this)}
                    onEnd={this.onVideoEnd.bind(this)}
                />
            </div>
        );
    }
}
export default VideoApp;

VideoJS APIs support:

onReady will return videojs instance. Which means you can use all the APIs provided by VideoJS.
List of VideoJS APIs

VideoJS plugins support:

Since most of the VideoJS plugins needs videojs instance to get initialized, it is very easy to integrate any of the available plugins by making use of videojs instance returnd by onReady event.
List of VideoJS plugins

Available Props:

<tr>
  <th>Prop Name</th>
  <th>Prop Type</th>
  <th>Default Value</th>
  <th>Description</th>
</tr> 

<tr>
  <td>src</td>
  <td><code>string</code></td>
  <td><code>""</code></td>
  <td>Video file path</td>
</tr>
<tr>
  <td>poster</td>
  <td><code>string</code></td>
  <td><code>""</code></td>
  <td>Video poster file path</td>
</tr>
<tr>
  <td>width</td>
  <td><code>string | number</code></td>
  <td><code>auto</code></td>
  <td>Video player width</td>
</tr>
<tr>
  <td>height</td>
  <td><code>string | number</code></td>
  <td><code>auto</code></td>
  <td>Video player height</td>
</tr>
<tr>
  <td>controls</td>
  <td><code>boolean</code></td>
  <td><code>true</code></td>
  <td>Video player control bar toggle</td>
</tr>
<tr>
  <td>autoplay</td>
  <td><code>boolean</code></td>
  <td><code>false</code></td>
  <td>Video will start playing automatically if <code>true</code></td>
</tr>
<tr>
  <td>preload</td>
  <td><code>string</code></td>
  <td><code>auto</code></td>
  <td>video tag preload attribute</td>
</tr>
<tr>
  <td>playbackRates</td>
  <td><code>array</code></td>
  <td><code>[0.5, 1, 1.5, 2]</code></td>
  <td>Video speed control</td>
</tr>
<tr>
  <td>hideControls</td>
  <td><code>array</code></td>
  <td><code>[]</code></td>
  <td>List of controls to hide. <code>['play','volume','seekbar','timer','playbackrates','fullscreen']</code></td>
</tr>
<tr>
  <td>bigPlayButton</td>
  <td><code>boolean</code></td>
  <td><code>true</code></td>
  <td>Big play button visibility toggle</td>
</tr> 
<tr>
  <td>bigPlayButtonCentered</td>
  <td><code>boolean</code></td>
  <td><code>true</code></td>
  <td>Big play button center position toggle</td>
</tr> 
<tr>
  <td>className</td>
  <td><code>string</code></td>
  <td><code>""</code></td>
  <td>Video player wrapper class. It can be used for custom player skin.</td>
</tr>

Video tracking props:

<tr>
  <th>Method Name</th>
  <th>Description</th>
</tr> 

<tr>
  <td>onReady</td>
  <td>It will fire when video player is ready to be used. It returns <code>videojs</code> instance.</td>
</tr>
<tr>
  <td>onPlay</td>
  <td>It will fire when video starts playing anytime. It returns current time of the video</td>
</tr>
<tr>
  <td>onPause</td>
  <td>It will fire when video is paused. It returns current time of the video</td>
</tr>
<tr>
  <td>onTimeUpdate</td>
  <td>It keeps firing while video is in playing state. It returns current time of the video</td>
</tr>
<tr>
  <td>onSeeking</td>
  <td>It will fire when video is beeing seeked using seekbar. It returns current time of the video</td>
</tr>
<tr>
  <td>onSeeked</td>
  <td>It will fire after seeking is done. It returns seek start time and seek end time for the video.</td>
</tr>
<tr>
  <td>onEnd</td>
  <td>It will fire when video is finished playing.</td>
</tr>