Video Loop

A video player that loops through multiple videos with fade transitions.

Preview

Installation

This component includes:

VideoLoop component
useVideoLoop hook
useFadeElement hook

Usage

Examples

With Debug Info

1 / 2

/placeholder-video-1.mp4 /placeholder-video-2.mp4

Custom Styling

API Reference

VideoLoop Component

Prop	Type	Default	Description
`videos`	`string[]`	-	Required. Array of video URLs to loop through
`repeatCount`	`number`	`2`	Number of times each video should repeat before moving to next
`className`	`string`	-	Additional CSS classes for the video element
`showDebug`	`boolean`	`false`	Show debug information overlay
`playsInline`	`boolean`	`true`	Play video inline on mobile (prevents fullscreen)
`enableVolumeWithMouseHover`	`boolean`	`false`	Unmute video on mouse hover

useVideoLoop Hook

Returns:

videoRef: Ref object for the video element
currentIndex: Index of the current video in the array
currentRepeat: Current repeat count for the video
currentVideo: URL of the current video

useFadeElement Hook

Parameters:

elementRef: Ref object for the element to fade
duration: Fade duration in milliseconds (default: 300)
onTransitionComplete: Optional callback after fade transition

Returns:

fadeIn: Function to fade in the element
fadeOut: Function to fade out the element
fadeTransition: Function to fade out, execute callback, then fade in

How It Works

Each video plays and repeats repeatCount times
After all repeats, the component fades out
The next video in the array loads
The component fades back in
Process repeats for all videos in the array
After the last video, loops back to the first video

Notes

Videos autoplay when loaded
Fade transition duration is 300ms
The component fills its parent container (100% width and height)
Debug mode shows current repeat count and clickable video URLs