# VideoPlayer

A feature-rich video player component with floating mode support, custom controls, and automatic state management.

---

## Overview

The `VideoPlayer` is a comprehensive video playback solution designed to deliver a seamless viewing experience across the platform. It features custom playback controls, automatic floating behavior when scrolled out of view, and full integration with the Xertica UI design system.

---

## Features

- **Custom Playback Controls**: Play/Pause, Progress Bar, Volume, Mute, Picture-in-Picture, and Fullscreen.
- **Auto-Floating Mode**: Automatically transforms into a floating window when scrolled out of view.
- **Intelligent Controls Visibility**: Controls hide after 2.5s of inactivity during playback.
- **Responsive Design**: Adapts perfectly to mobile and desktop viewports.

---

## Props

| Prop              | Type      | Default | Description                                                  |
| ----------------- | --------- | ------- | ------------------------------------------------------------ |
| `src`             | `string`  | —       | The source URL of the video.                                 |
| `poster`          | `string`  | —       | URL of an image to be shown before the video starts playing. |
| `title`           | `string`  | —       | Title of the video content.                                  |
| `autoPlay`        | `boolean` | `false` | Whether the video should start playing automatically.        |
| `enableAutoFloat` | `boolean` | `true`  | Whether the video should float when scrolled out of view.    |

---

## Examples

### Basic Video Player

```tsx
import { VideoPlayer } from 'xertica-ui/media';

<VideoPlayer src="https://example.com/video.mp4" title="My Video" />;
```

### Video with Poster Image

```tsx
<VideoPlayer
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  title="Featured Video"
/>
```

---

## AI Rules

> [!TIP]
>
> - **Auto-Float** — The floating behavior is ideal for long-form content where users may want to continue watching while scrolling through other content.
> - **Posters** — Always provide a `poster` image for better UX, especially for videos that may take time to load.

---

## Related Components

- [`FloatingMediaWrapper`](./floating-media-wrapper.md) — The underlying wrapper for floating behavior.
- [`AudioPlayer`](./audio-player.md) — For audio playback.