React-videojs-hook NPM

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

react-videojs-hook react hook videojs video.js video player

@infinitebrahmanuniverse/nolb-react-v @everything-registry/sub-chunk-2622

1.0.1

4 years ago

1.0.0

4 years ago