Need Paper Mache

    react-modal-videojs

    0.3.0 • Public • Published

    react-modal-videojs

    React VideoJS on Modal Dialog. Based from react-video-js, I tweak it a bit.

    NPM JavaScript Style Guide

    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'
     
    export default class App extends Component {
      constructor(props){
        super(props)
        this.state = {
          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
        }
      }
     
      showModal = () => {
        this.setState({ show: true });
      }
     
      hideModal = () => {
        this.setState({ show: false });
      }
     
      render () {
        const { poster, src, show } = this.state;
        return (
          <div>
            <h1>React Modal VideoJS</h1>
            <div className="container">
              <ModalVideo
                id={ (new Date() *1).toString() }
                src={src}
                poster={poster}
                show={show}
                showModal={this.showModal}
                handleClose={this.hideModal}
              />
            </div>
          </div>
        )
      }
    }
     

    Props

    Modal Props

    • modalBackdropClass: String, default ''.
    • modalContentClass: String, default ''.
    • modalCloseButtonClass: String, default ''.
    • fade: Boolean, default true.
    • alt: String, default ''.
    • noOuterClose: Boolean, default false. (Disable close modal when click on the backdrop)

    VideoJS Props

    • id: (required) String.
    • source: (required) String.
    • sourceHD: String, default ''.
    • poster: String, default null.
    • responsive: Boolean, default false.
    • fluid: Boolean, default true.
    • fill: Boolean, default true.
    • skin: String, default default.
    • autoplay: Boolean, default true.
    • bigPlayButton: Boolean, default false (Because autoplay is true).
    • customSkinClass: String, default ''.
    • height: Number, default null.
    • width: Number, default null.
    • loop: Boolean, default false.
    • onReady: Functon, callback(videoJsPlayer).
    • resize: Boolean, default true.
    • options: Boolean, default
    • onEnded: Function, callback(videoJsPlayer).
    • onPlay: Function, callback(videoJsPlayer).
    • onPause: Function, callback(videoJsPlayer).
    • debounce: Number, default 300.
    • bigPlayButtonCentered: Boolean, default false.

    License

    MIT © waskito

    Install

    npm i react-modal-videojs

    DownloadsWeekly Downloads

    136

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    9.68 MB

    Total Files

    6

    Last publish

    Collaborators

    • waskito