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 | :white_check_mark: | :white_check_mark: | :white_check_mark: |