useVideo
A hook that provides complete control over an HTML video element. Perfect for implementing custom video players with playback controls, volume management, time tracking, and fullscreen support.
Parameters
ref
:RefObject<HTMLVideoElement>
- Reference to the video element to control
Returns
State
isPaused
:boolean
- Whether the video is currently pausedisMuted
:boolean
- Whether the video is currently mutedcurrentVolume
:number
- Current volume (0-100)currentTime
:number
- Current playback position in seconds
Playback Controls
play
:() => void
- Start playbackpause
:() => void
- Pause playbacktogglePause
:() => void
- Toggle play/pause state
Volume Controls
increaseVolume
:(increase?: number) => void
- Increase volume by amount (default: 5)decreaseVolume
:(decrease?: number) => void
- Decrease volume by amount (default: 5)mute
:() => void
- Mute the videounmute
:() => void
- Unmute the videotoggleMute
:() => void
- Toggle mute state
Time Controls
forward
:(increase?: number) => void
- Skip forward by seconds (default: 5)back
:(decrease?: number) => void
- Skip backward by seconds (default: 5)
Display Controls
toggleFullscreen
:() => void
- Toggle fullscreen mode
Usage
import { useVideo } from '@rhinolabs/react-hooks';
import { useRef } from 'react';
function VideoPlayer() {
const videoRef = useRef<HTMLVideoElement>(null);
const {
isPaused,
isMuted,
currentVolume,
currentTime,
togglePause,
toggleMute,
forward,
back,
toggleFullscreen
} = useVideo(videoRef);
return (
<div>
<video
ref={videoRef}
src="/path/to/video.mp4"
/>
<div>
<button onClick={togglePause}>
{isPaused ? 'Play' : 'Pause'}
</button>
<button onClick={toggleMute}>
{isMuted ? 'Unmute' : 'Mute'}
</button>
<button onClick={() => back()}>-5s</button>
<button onClick={() => forward()}>+5s</button>
<button onClick={toggleFullscreen}>
Fullscreen
</button>
<div>Volume: {currentVolume}%</div>
<div>Time: {currentTime}s</div>
</div>
</div>
);
}
Notes
- Automatically syncs with video element state
- Handles event listeners cleanup
- Provides granular volume control
- Supports time seeking
- Includes fullscreen support
- Maintains video state
- Safe volume boundaries
- Cleans up on unmount
Last updated on