react-modal-videojs
React VideoJS on Modal Dialog. Based from react-video-js, I tweak it a bit.
JQuery & Fancybox Alternative
This package is react-based (react & videojs only)
.
If you are looking for react
wrapper of jquery + fancybox
, try to use react-videojs-fancybox instead.
Demo
Check the Demo
Install
npm install --save react-modal-videojs
Usage
import React Component from 'react'import ModalVideo from 'react-modal-videojs' { thisstate = src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" poster: "https://raw.githubusercontent.com/waskito/react-modal-videojs/master/example/public/preview.png" show: false } { this; } { this; } { const poster src show = thisstate; return <div> <h1>React Modal VideoJS</h1> <div ="container"> <ModalVideo = = = = = = /> </div> </div> }
Props
Modal Props
modalBackdropClass
: String, default''
.modalContentClass
: String, default''
.modalCloseButtonClass
: String, default''
.fade
: Boolean, defaulttrue
.alt
: String, default''
.noOuterClose
: Boolean, defaultfalse
. (Disable close modal when click on the backdrop)
VideoJS Props
id
: (required) String.source
: (required) String.sourceHD
: String, default''
.poster
: String, defaultnull
.responsive
: Boolean, defaultfalse
.fluid
: Boolean, defaulttrue
.fill
: Boolean, defaulttrue
.skin
: String, defaultdefault
.autoplay
: Boolean, defaulttrue
.bigPlayButton
: Boolean, defaultfalse
(Becauseautoplay
istrue
).customSkinClass
: String, default''
.height
: Number, defaultnull
.width
: Number, defaultnull
.loop
: Boolean, defaultfalse
.onReady
: Functon,callback(videoJsPlayer)
.resize
: Boolean, defaulttrue
.options
: Boolean, defaultonEnded
: Function,callback(videoJsPlayer)
.onPlay
: Function,callback(videoJsPlayer)
.onPause
: Function,callback(videoJsPlayer)
.debounce
: Number, default300
.bigPlayButtonCentered
: Boolean, defaultfalse
.
License
MIT © waskito