Video

The Video component provides a custom-styled video player with controls for playback, volume, fullscreen, and support for different aspect ratios.

Props

The Video component accepts the following props:

• src - URL of the video file to play. Supports MP4, WebM, and HLS streams (required)
• poster - URL of the poster image displayed before playback starts
• aspect - Aspect ratio: horizontal (16:9), vertical (9:16), or square (1:1) (default: horizontal)
• autoplay - Automatically start playback when loaded (default: false)
• class - Additional CSS classes to apply

Features

• Multiple Formats - Supports MP4, WebM, and HLS streaming formats
• Custom Controls - Play/pause, volume, progress bar, and fullscreen
• Responsive - Adapts to different screen sizes and aspect ratios
• Poster Image - Optional thumbnail displayed before playback
• Keyboard Support - Space for play/pause, arrow keys for seeking

Example Usage

Basic usage with poster:

Vertical video with autoplay:

Square video without poster:

Supported Video Formats

• MP4 - Standard video format (.mp4)
• WebM - Open video format (.webm)
• HLS - HTTP Live Streaming (.m3u8) for adaptive streaming

Browser Autoplay Policy

Note that most browsers restrict autoplay with sound. If using autoplay, the video may be muted by default or require user interaction to play with sound.