Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including hopin-react-video-js-player with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var hopinReactVideoJsPlayer = require("hopin-react-video-js-player")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

hopin-react-video-js-player v1.1.3

React wrapper for VideoJS

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:

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

Video tracking props:

Method Name Description
onReady It will fire when video player is ready to be used. It returns videojs instance.
onPlay It will fire when video starts playing anytime. It returns current time of the video
onPause It will fire when video is paused. It returns current time of the video
onTimeUpdate It keeps firing while video is in playing state. It returns current time of the video
onSeeking It will fire when video is being seeked using seekbar. It returns current time of the video
onSeeked It will fire after seeking is done. It returns seek start time and seek end time for the video.
onEnd It will fire when video is finished playing.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free