react-videoplayer v0.6.4

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

Keyboard Shortcuts

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