video-react-hooks

video-react-hooks represents video events in the form of React hooks

Purpose

Video-react-hooks represents video events in the form of React hooks. By encapsulating the video event logic in hooks. These hooks can then be easily used across the application in components that are affected by the video events. This approach not only simplifies the code but also makes it more readable and maintainable.

Instalation

npm install --save video-react-hooks

Usage Example

Each hook built on the concept of React hooks, and each hook is based on a specific video event. These hooks are executed when the corresponding event occurs during video playback. Under the hood video-react-hooks also used React hooks.

Check Live Example

import { useReadyEffect, usePlayingEffect, usePauseEffect } from 'video-react-hooks';

export const VideoComponent = () => {

  useReadyEffect(() => {
    //executed when video is ready
  }, []);

  usePlayingEffect(() => {
    //executed when video is playing
  }, []);

  usePauseEffect(() => {
    //executed when video is paused
  }, []);

  return (
    <div className="App">
       <video controls>
        <source
          src="src"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
    </div>
  );
}

API Details

useReadyEffect - executed when video is ready

import { useReadyEffect } from 'video-react-hooks';

useReadyEffect(() => {
  //code here
}, []);

usePlayingEffect - executed when video is playing

import { usePlayingEffect } from 'video-react-hooks';

usePlayingEffect(() => {
  //code here
}, []);

usePauseEffect - executed when video is paused

import { usePauseEffect } from 'video-react-hooks';

usePauseEffect(() => {
  //code here
}, []);

useWaitingEffect - executed when video is waiting

import { useWaitingEffect } from 'video-react-hooks';

useWaitingEffect(() => {
  //code here
}, []);

useSeekingEffect - executed when video is seeking

import { useSeekingEffect } from 'video-react-hooks';

useSeekingEffect(() => {
  //code here
}, []);

useSeekedEffect - executed when video is seeked

import { useSeekedEffect } from 'video-react-hooks';

useSeekedEffect(() => {
  //code here
}, []);

useTimeUpdateEffect - executed when video is timeupdate event executed
_{this hooks executed once per frame}

import { useTimeUpdateEffect } from 'video-react-hooks';

useTimeUpdateEffect(() => {
  //code here
}, []);

useEndEffect - executed when video is ended
_{executed for hls(vod) or mp4 video}

import { useEndEffect } from 'video-react-hooks';

useEndEffect(() => {
  //code here
}, []);

useErrorEffect - executed when video error event occur

import { useErrorEffect } from 'video-react-hooks';

useErrorEffect((e) => {
  //code here
}, []);

useVolumeChangeEffect - executed when video volume change

import { useVolumeChangeEffect } from 'video-react-hooks';

useVolumeChangeEffect((e) => {
  //code here
}, []);

Available Hooks
useRateChangeEffect
useStalledEffect
useSuspendEffect
useAbortEffect

Types

Event	Type	Hook	Description
e	TErrorEffect	useErrorEffect	Value of error
e	TVolumeEffect	useVolumeChangeEffect	Value of volume change

Testing

Video Types	HLS(LIVE)	HLS(VOD)	MP4
Supported	✅	✅	✅