React-videojs-wrapper NPM

react-videojs-wrapper

React wrapper for VideoJS

Install

npm install --save react-videojs-wrapper

Usage

import React, { Component } from 'react';
import VideoPlayer from 'react-videojs-wrapper';

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;

Providing video sources

Sources can be provided via the src function on the instance of a video.js player.

Using `player.src()`

player.src([
  {
    src: 'https://example.com/video_720.mp4',
    type: 'video/mp4',
    label: '720P'
  },
  {
    src: 'https://example.com/video_480.mp4',
    type: 'video/mp4',
    label: '480P',
    selected: true
  },
  {
    src: 'https://example.com/video_360.mp4',
    type: 'video/mp4',
    label: '360P'
  }
]);

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