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

Package Sidebar

Install

npm i react-videojs-hook

Weekly Downloads

98

Version

1.0.1

License

MIT

Unpacked Size

32.3 kB

Total Files

9

Last publish

Collaborators

  • hector101