React Video Player

A configrable react html5 video component

Installation

$ npm install react-videoplayer --save

Getting Started

import VideoPlayer from 'react-videoplayer'
import 'react-videoplayer/lib/index.css'

Features

• Pass Initial volume, time, playback rate
• Disable/Enable default controls
• Disable/Enable custom controls
• Disable any particular control like playback rate control
• Pass custom icons for any button
• Keyboard Controls
• Customize slider (Overwrite CSS)
• Control hiding on mouse out or no mouse movement
• Support for playlist

Upcoming Features (v1)

• High Order Component one can pass custom Control with exposed API for control
• Customize keyboard control in run-time

Props

Prop | Type | Default | Description --------- | ------- | ------- | ----------- videoSrc | string | | video url (required) videoVolume | number | 100 | intial playback volume range [0-100] videoProgress | string | 0m0s | video start time as string MM:SS videoPlaybackRate | number | 1 | Default playback rate autoPlay | bool | false | video will played as component is mounted muted | bool | false | mutes the video if true playButtonImg | string | svg-icon | icon path pauseButtonImg | string | svg-icon | icon path nextButtonImg | string | svg-icon | icon path previousButtonImg | string | svg-icon | icon path volumeButtonImg | string | svg-icon | icon path volumeButtonMuteImg | string | svg-icon | icon path fullScreenButtonImg | string | svg-icon | icon path playbackRateButtonImg | string | svg-icon | icon path previousButtonClassName | string |'' | class for prev btn is disabled ( when 1st video is played) nextButtonClassName | string | '' | class for prev btn is disabled ( when last video is played) onPlay | func | | function called when video starts intially onPlaying | func | | function called when video played onEnded | func | | function called when video ends playlist | bool | false | when true prev and next btn are active playNext | func | | func called when next buttin is clicked playPrevious | func | | func called when prev buttin is clicked defaultSeekTime | number | 10 | default seek time when video is seeked through key defaultVolumeChange | number | 10 | default volume change when changed through key defaultBrowserControls | bool | false | default html5 controls customHtmlControls | bool | true | default custom controls keyboardControls | bool | true | enables keyboard controls notificationClass | string | 'video-player-notifications' | default class for notification notificationDuration | number | 1500 | timeout for notification

Keyboard Shortcuts

Key	Action
Up Arrow	Increase Volume
Down Arrow	Decrease Volume
Right Arrow	Seek Forward
Left Arrow	Seek Backward
]	Increase PlayBack Rate
[	Decrease PlayBack Rate
	Default Playback Rate
Enter / F	Fullscreen Toggle
Space / K	play-Pause Toggle
L	Seek Forward
J	Seek Backward
M	Toggle Volume
T	Toggle TheaterMode
>	play Next Video
<	play Previous Video
H	Show HelpBox

Basic Example

import React from 'react';
import VideoPlayer from 'react-videoplayer'
import 'react-videoplayer/lib/index.css'


class Player extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            videoSrc : 'https://www.w3schools.com/html/mov_bbb.mp4'
        };
        
    }


    render() {
        return (
            <div>
                <VideoPlayer
                    videoSrc={this.state.videoSrc}
                    autoPlay={true}
                />
            </div>
        );
    }
}

export default Player;

Advance Example

This examples contains one more component dragNdrop which is loosely based on react-drag-and-drop through which files are dropped to play.

import React from 'react';
import VideoPlayer from 'react-videoplayer'
import 'react-videoplayer/lib/index.css'
import DragNDropInput from '../components/DragNDropInput';


class Player extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            playlist: [],
            videoFiles: [],
            videoSrc: "",
            currentVideo: -1,
            previousButtonClassName: "",
            nextButtonClassName: ""
        };

        this.DragNDropInputOnDrop = this.DragNDropInputOnDrop.bind(this);
        this.videoPlayerPlayNext = this.videoPlayerPlayNext.bind(this);
        this.videoPlayerPlayPrevious = this.videoPlayerPlayPrevious.bind(this);
    }


    DragNDropInputOnDrop(dragndrop, acceptedFiles) {
        let newVideoFile = [];
        let newPlayList = [];
        let oldVideoFile = this.state.videoFiles;
        let oldPlayList = this.state.playlist;
        acceptedFiles.forEach((file) => {
            const index = helper.isObjectDuplicate(file, oldVideoFile, "name");
            const fileURL = URL.createObjectURL(file);
            if (index === -1) {
                newVideoFile.push(file);
                newPlayList.push(fileURL);
            }
        });

        if (newPlayList.length > 0) {
            this.setState((prevState) => {
                let currentVideo = -1;
                if (prevState.currentVideo === -1) {
                    currentVideo = 0;
                }
                else {
                    currentVideo = prevState.currentVideo;
                }
                const playlist = [...oldPlayList, ...newPlayList];
                const videoFiles = [...oldVideoFile, ...newVideoFile];
                return {
                    nextButtonClassName: "",
                    playlist,
                    videoFiles,
                    currentVideo,
                    videoSrc: playlist[currentVideo]
                };
            });
        }
    }

    videoPlayerPlayNext() {
        if (this.state.currentVideo === this.state.playlist.length - 1) {
            return;
        }
        else {
            this.setState((prevState) => {
                const currentVideo = prevState.currentVideo + 1;
                const className = currentVideo === prevState.playlist.length - 1 ? "disabled" : "";
                return {
                    currentVideo,
                    videoSrc: prevState.playlist[currentVideo],
                    nextButtonClassName: className,
                    previousButtonClassName: ""
                };
            });
        }
    }

    videoPlayerPlayPrevious() {
        if (this.state.currentVideo === 0) {
            return;
        }
        else {
            this.setState((prevState) => {
                const currentVideo = prevState.currentVideo - 1;
                const className = currentVideo === 0 ? "disabled" : "";
                return {
                    currentVideo,
                    videoSrc: prevState.playlist[currentVideo],
                    previousButtonClassName: className,
                    nextButtonClassName: ""
                };
            });
        }
    }


    render() {
        return (
            <div>
                {this.state.videoSrc === "" ? false :
                    <VideoPlayer
                        videoSrc={this.state.videoSrc}
                        playNext={this.videoPlayerPlayNext}
                        playPrevious={this.videoPlayerPlayPrevious}
                        nextButtonClassName={this.state.nextButtonClassName}
                        previousButtonClassName={this.state.previousButtonClassName}
                        autoPlay={true}
                        playlist={this.state.playlist.length > 1}
                    />}
                <DragNDropInput
                    onDrop={this.DragNDropInputOnDrop}
                />

            </div>
        );
    }
}

export default Player;

Screenshots

Note: Image contains music video believer by Imagine Dragons to which I claim not rights.

Issues

Feel free to contribute. Submit a Pull Request or open an issue for further discussion.

License

MIT