@folly-systems/custom-react-player

Custom React Player

A simple and lightweight video player component that helps you customize controls for your videos.

📸 Screenshots and Videos

📦 Install

Yarn

yarn add @folly-systems/custom-react-player

npm

npm i @folly-systems/custom-react-player

🔨 Usage

ES5

var CustomizableVideoPlayer= require('@folly-systems/custom-react-player');

function MyComponent(){
    var videoLink = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
    
    return(
        <div>
	    <CustomizableVideoPlayer url={videoLink} />
	</div>
    )
}

module.exports = MyComponent;

ES6

import CustomizableVideoPlayer from '@folly-systems/custom-react-player'

export const MyComponent=()=>{
    const videoLink = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
    
    return(
        <div>
	    <CustomizableVideoPlayer url={videoLink} />
	</div>
    )
}

🎬 Demo Page

https://folly-systems.github.io/custom-react-player-example-app/

🎨 Props

Prop	Description	Default	Required
url	The url of the video		True
height	Height of the video player in px	400	False
width	Width of the video player in px	500	False
playing	The video state can be changed using this object   ◦   status: Setting this property true plays the video and false pauses the video   ◦   time: Current playing time of the video can be changed using this property   ◦   speed: Playback speed of the video can be changed using this property(from 1-10).	false	False
rounded	Set true for rounded edges for the video player	false	False
playerType	Set "small" for smaller video player and "big" for larger video player    (It changes the size of video control icons)	small	False
getVideoProgressDetails	The function will be called initially when the component loads and it will receive an object which has methods to get the video details {getPlaybackSpeed, getCurrentTime, getPlayingStatus}   ◦   getPlaybackSpeed: This method returns playback speed of the video   ◦   getCurrentTime: This method returns current playing time of the video   ◦   getPlayingStatus: This method returns a boolean value depending on the videos playing status		False
controls	Customize any of the video controls by using these option:  fullscreen {show:true/false , icon: Custom icon}   ◦ show(false/true): false will hide the fullscreen icon. By default the icon is visible.   ◦ icon: Add your custom fullscreen icon using this option.  playPause {show:true/false , playIcon: Custom play con, pauseIcon: Custom pause icon}   ◦ show(false/true): false will hide the play and pause icon. By default the icon is visible.   ◦ playIcon: Add your custom play icon using this option.   ◦ pauseIcon: Add your custom pause icon using this option.  playbackSpeed {show:true/false , color: Custom color}   ◦ show(false/true): false will hide the playback speed icon. By default the icon is visible.   ◦ color: Change color of the playback speed text.  volume {show:true/false , icon: Custom icon}   ◦ show(false/true): false will hide the volume icon. By default the icon is visible.   ◦ icon: Add your custom volume icon using this option.  time {show:true/false}   ◦ show(false/true): false will hide the time. By default the time is visible.   ◦ color: Change color of the time text.	undefined	False
handleFullscreen	This function will be called when user clicks on fullscreen icon {getPlaybackSpeed, getCurrentTime, getPlayingStatus}   ◦   getPlaybackSpeed: A function that returns the current playback speed   ◦   getCurrentTime: A function that returns the current video time.   ◦   getPlayingStatus: A function that returns true if video is playing or else false		False
onVideoProgress	This function will be called whenever the video progress event is triggered. This function will get object that has details about the video status{isPlaying, currentTime, speed, totalTime}   ◦   speed: The current playback speed   ◦   currentTime: The current video time.   ◦   isPlaying: True if video is playing or else false   ◦   totalTime: Total video duration		False

🖥 Environment Support

• Chrome
• Firefox
• Safari
• Edge

✨ Features

• 🦋 Lightweight. It has no additional dependencies other than React.
• 🔨 Provides lots of customization for your videos.
• 🎨 Makes use of CSS modules.
• 🛡 Written in TypeScript.

🔐 License

MIT. Copyright (c) 2021 folly-systems.