useVideoLoop
A hook for managing video playback loops with fade transitions.
Installation
This hook is included when you install the video-loop component:
Usage
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
videos | string[] | Yes | Array of video URLs to loop through |
repeatCount | number | Yes | Number of times each video should repeat |
Return Value
| Property | Type | Description |
|---|---|---|
videoRef | RefObject<HTMLVideoElement> | Ref to attach to the video element |
currentIndex | number | Index of the currently playing video |
currentRepeat | number | Current repeat count (0-indexed) |
currentVideo | string | URL of the currently playing video |
How It Works
- The hook manages video playback state and automatically handles video transitions
- Each video plays
repeatCounttimes before moving to the next - Uses the
useFadeElementhook to create smooth transitions between videos - Automatically loops back to the first video after the last one finishes
- The video element referenced by
videoRefwill autoplay when the source changes
Dependencies
This hook depends on:
useFadeElement- for fade transitions between videos