Nachos Pillage Milwaukee

    react-videojs-hook
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    react-videojs-hook

    A React hook for video.js

    NPM JavaScript Style Guide

    Install using npm

    npm install --save react-videojs-hook
    npm install --save video.js

    Install using yarn

    yarn add react-videojs-hook
    yarn add video.js

    Usage

    import React from 'react';
    import { useVideojs } from 'react-videojs-hook';
     
    import 'video.js/dist/video-js.css';
     
    const App = () => {
      const onPlay = (currentTime?: number) => {
        console.log("Video played at: ", currentTime);
      };
     
      const onPause = (currentTime?: number) => {
        console.log("Video paused at: ", currentTime);
      };
     
      const onEnd = (currentTime?: number) => {
        console.log(`Video ended at ${currentTime}`);
      };
     
      const onTimeUpdate = (currentTime: number) => {
        console.log(`Video current time is ${currentTime}`)
      };
     
      const { vjsId, vjsRef, vjsClassName } = useVideojs({
        src: 'https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4',
        controls: true,
        autoplay: true,
        responsive: true,
        bigPlayButtonCentered: true,
        onPlay,
        onPause,
        onEnd,
        onTimeUpdate,
      });
     
     
      // wrap the player in a div with a `data-vjs-player` attribute
      // so videojs won't create additional wrapper in the DOM
      // see https://github.com/videojs/video.js/pull/3856
      return (
        <div data-vjs-player>
          <video ref={vjsRef} id={vjsId} className={vjsClassName}></video>
        </div>
      )
    }

    Hook Parameters

    Param Description Required Default
    src The video source URL true
    className className to customize video player UI false
    sources The sources for a media asset. [{src: 'http://ex.com/video.mp4', type: 'video/mp4'}] false false
    aspectRatio The value to set the Player's aspect ratio to false
    controls Set to true or false to display native player controls false false
    autoplay Set the autoplay option, true or false false false
    textTrackSettings Manipulate Text Tracks settings. false
    defaultVolume Video player initial volume false false
    responsive Set responsive mode to add and remove classes based on its size breakpoints false false
    responsive Set responsive mode to add and remove classes based on its size breakpoints false false
    width Set player width false auto
    height Set player height false auto
    height Set player height false auto
    bigPlayButton Set initial play button that shows before the video has played false true
    onReady Triggered when player is loaded and ready to play false
    onPlay Triggered when player's play button is clicked false
    onPause Triggered when player's pause button is clicked false
    onTimeUpdate Triggered every time play time updates false
    onSeeking Triggered on player seeking to a different play time false
    onSeeked Triggered on player seeking completion to a different play time false
    onEnd Triggered when video finishes playing false

    How to contribute

    To contribute, fork this repo to your private repository and create a pull request based on the feature you want to add.

    License

    MIT © Hector101

    Install

    npm i react-videojs-hook

    DownloadsWeekly Downloads

    268

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    32.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • hector101