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

`JavaScript

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 (

);
}

`

API Details

useReadyEffect - executed when video is ready

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

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

usePlayingEffect - executed when video is playing

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

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

usePauseEffect - executed when video is paused

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

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

useWaitingEffect - executed when video is waiting

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

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

useSeekingEffect - executed when video is seeking

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

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

useSeekedEffect - executed when video is seeked

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

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

useTimeUpdateEffect - executed when video is timeupdate event executed


this hooks executed once per frame

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

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

useEndEffect - executed when video is ended


executed for hls(vod) or mp4 video

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

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

useErrorEffect - executed when video error event occur

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

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

useVolumeChangeEffect - executed when video volume change

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

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

| Available Hooks |
| --------------- |
| useRateChangeEffect |
| useStalledEffect |
| useSuspendEffect |
| useAbortEffect |

$3

| Event | Type | Hook | Description |
| --- | :--- | :-- | --- |
| e | TErrorEffect | useErrorEffect | Value of error |
| e | TVolumeEffect | useVolumeChangeEffect` | Value of volume change |

$3

| Video Types | HLS(LIVE) | HLS(VOD) | MP4 |
| --- | --- | --- | --- |
| Supported | :white_check_mark: | :white_check_mark: | :white_check_mark: |