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