react-video-play
v2.0.3
Published
React video player for TypeScript and JavaScript like youtube
Downloads
118
Readme
react-video-play
React video player for TypeScript and JavaScript like youtube
Demo react-video-play
How to install
npm i react-video-play --save
How to import
For TypeScript usage there is an index.d.ts in node_modules folder
import {ReactVideoPlay, VideoSourceType} from 'react-video-play';
or
var ReactVideoPlay = require('react-video-play');
var VideoSourceType = require('react-video-play').VideoSourceType;
How to use
CSS
Use css and images. There is a public folder in node_modules/react-video-play
node_modules/react-video-play/public/css/react-video-play.css
TSX / JSX
<ReactVideoPlay
sources={src}
poster="http://lorempixel.com/900/450/people/"
advComponent={<UIVideoAdvTest/>}
enableSlider={true}
sliderSlides={slides}
autoplay={true}
muted={true}
/>
Options
sources
(Source[], required) - video source's interfaces for TypeScript implementations
interface Source {
name: string,
default?: boolean,
source: VideoSource[]
}
enum VideoSourceType{
video_mp4,
video_webm,
video_ogg
}
interface VideoSource {
source: string,
type: VideoSourceType,
codecs?: string
}
Source example
import {VideoSourceType} from 'react-video-play';
// or const VideoSourceType = require('react-video-play').VideoSourceType;
let src = [
{
name: '1080p',
source: [{
source: 'http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4',
type: VideoSourceType.video_mp4
}, {
source: 'http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.webm',
type: VideoSourceType.video_webm
}, {
source: 'http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.ogv',
type: VideoSourceType.video_ogg
}]
}, {
name: '720p',
default: true,
source: [{
source: 'http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4',
type: VideoSourceType.video_mp4
}, {
source: 'http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.webm',
type: VideoSourceType.video_webm
}, {
source: 'http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.ogv',
type: VideoSourceType.video_ogg
}, {
source: 'http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.m4v',
type: VideoSourceType.video_mp4
}]
}
];
enableSlider
(boolean, default: false) - enable preview sliderhideSliderInMobile
(boolean, default: true) - hide slider in mobile devicessliderSlides
(VideoSliderSlide[], required if enableSlider installed true) - slides
interface VideoSliderSlide {
img: string,
link: string
}
sliderSlides example
slides: [
{
img: "http://lorempixel.com/100/75/people/",
link: "http://video.egorov.pw",
},
{
img: "http://lorempixel.com/100/75/city/",
link: "http://video.egorov.pw",
}
]
enableAdv
(boolean, default: true) - enable ADV, it will be shown whenever player pauseadvComponent
(JSX.Element, required if enableAdv installed true) - React component for ADVposter
(string, default: none) - show preview video imagewidth
(number, default: none) - video container widthheight
(number, default: none) - video container heightcontrols
(boolean, default: true) - controlsautoplay
(boolean, default: false) - autoplay video after startmuted
(boolean, default: false) - muted by defaultshowSourceName
(boolean, default: false) - prefer source name to HQ iconambiLight
(boolean, default: false) - switch on Philips ambilightloaderColor
(string, default: "#fff") - default loader color
For development
just use:
$ yarn or $ npm i
$ npm run dev
open your browser http://localhost:3000
For Build
$ npm run production