1.0.4 • Published 4 years ago

simple-react-video-player v1.0.4

Weekly downloads
14
License
ISC
Repository
github
Last release
4 years ago

This project was bootstrapped with Create React App.

Usage

npm install simple-react-video-player --save
# or
yarn add simple-react-video-player

Demo

For demo : https://react-custom-video-player.netlify.com/

The most basic react-video-player can be described with:

import React, { Component } from 'react';
import VideoPlayer from 'containers/VideoPlayer';

class VideoContainer extends Component {
	render() {
		return (
			<div>
				<VideoPlayer src='https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8' />
			</div>
		);
	}
}

export default VideoContainer;

The basic react-video-player with advertisement can be implemented with :

import React, { Component } from 'react';
import VideoPlayer from 'containers/VideoPlayer';

class VideoContainer extends Component {
	render() {
		return (
			<div>
				<VideoPlayer
					src='https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
					adSrc={{
						url: [ 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4' ]
					}}
				/>
			</div>
		);
	}
}

export default VideoContainer;

Properties

PropsTypeDefault ValueDescription
srcUrl''Url of the video to be played of mp4 or m3u8 format only
adSrcObject-Object containing advertisement details-with url(mandatory),skippable,showSkipAdAfter,firstAdOccurence as keys
->(key) urlArray''Array of URLs of the Advertisement videoes to be played of mp4 or m3u8 format only(preferably duration less than 1 minute)
->(key) skippableBooleantrueWhether the Ad can be skippede or not
->(key)showSkipAdAfterNumber5If it is a skippable Ad,then the skip can be enabled after this time
->(key)firstAdOccurenceNumber0First Ad can be played at this instance of time of the main video
titleString''Title of the video to be displayed in pause state
descriptionString''description of the video to be displayed in pause state
posterUrl''poster of the video to be displayed in pause state
isAutoPlayBooleanfalseWhether autoplay should be enabled or not
isControlsBooleantrueWhether the control panel should be visible or not
forward_rewind_timeNumber10changes the forward and rewing time interval of the player
onPlayFunctionfunction=()=>{console.log('Video is playing')}Called when media starts or resumes playing after pausing or buffering
onEndedFunctionfunction=()=>{console.log('Video ended')}Callback funtion at the end of the video
onPauseFunctionfunction=()=>{console.log('Video paused')}Callback funtion while the video is paused
onDoubleClickCaptureFunctionfunction=()=>{console.log('Double click captured')}Callback funtion on double click capture
configurationsObject{width: '600px',left: '0px',right: '0px',top: '0px',bottom: '0px',iconColor: 'white',controlBarBgColor: 'black',seekBarColor: 'red',fontSize: '20px',minHeight: '100px',maxHeight: '600px'}Configurations to change the width and positioning of the video player and to change the colour of the seek bar, control panel and the icons
->(key) widthNumber(px)/String(px,%)600changes the width of the video player
->(key) leftNumber(px)/String(px,%)0
->(key) rightNumber(px)/String(px,%)0
->(key) topNumber(px)/String(px,%)0
->(key) bottomNumber(px)/String(px,%)0
->(key) iconColorString'white'changes the icon colour of the control panel
->(key) controlBarBgColorString'black'changes the control bar colour of the control panel
->(key) seekBarColorString'red'changes the seek bar colour
->(key) fontSizeNumber(px)/String(px,%)20changes the font of the icon
->(key) minHeightNumber(px)/String(px,%)100sets the minimum height to the video player
->(key) maxHeightNumber(px)/String(px,%)600sets the maximum height to the video player
KeyOptions
adSrcurl:Array of URLs of the Advertisement videoes to be played of mp4 or m3u8 format only(preferably duration less than 1 minute)
skippable:Whether the Ad can be skippede or not
showSkipAdAfter:If it is a skippable Ad,then the skip can be enabled after this timefirstAdOccurence:First Ad can be played at this instance of time of the main video
configurationswidth:changes the width of the video player
left:overrides default player left positioning
right:overrides default player right positioning
top:overrides default player top positioning
bottom:overrides default player bottom positioning
iconColor:overrides default player iconColor positioning
controlBarBgColor:overrides default player controlBarBgColor positioning
seekBarColor:overrides default player seekBarColor positioning
fontSize:overrides default player fontSize positioning
minHeight:overrides default player minHeight positioning
maxHeight:overrides default player maxHeight positioning