components-repo/react-videojs-hook

react-videojs-hook

A React hook for video.js

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