video-react-hooks represents video events in the form of React hooks
npm install video-react-hooks
video-react-hooks represents video events in the form of React hooks
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 |