# `PhiaUi.Components.VideoPlayer`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/media/video_player.ex#L1)

HTML5 video player with custom controls and aspect ratio support.

Uses the `PhiaVideoPlayer` JS hook for play/pause, progress bar, volume,
fullscreen, and time display. Pattern follows `audio_player.ex`.

## Aspect ratios

| Ratio       | CSS class            |
|-------------|----------------------|
| `:video`    | `aspect-video` (16:9)|
| `:square`   | `aspect-square`      |
| `:portrait` | `aspect-[9/16]`      |
| `:auto`     | none (intrinsic)     |

## Examples

    <.video_player id="demo" src="/videos/demo.mp4" />
    <.video_player id="hero" src="/videos/hero.mp4" poster="/images/poster.jpg" aspect_ratio={:video} />
    <.video_player id="reel" src="/videos/reel.mp4" aspect_ratio={:portrait} muted autoplay loop />

# `video_player`

Renders a video player component.

The component is wired to the `PhiaVideoPlayer` LiveView hook via `phx-hook`.
The hook manages play/pause toggling, progress seeking, volume control,
fullscreen, and timestamp display.

## Examples

    <.video_player id="demo" src="/videos/demo.mp4" />

    <.video_player
      id="hero"
      src="/videos/hero.mp4"
      poster="/images/poster.jpg"
      aspect_ratio={:video}
    />

## Attributes

* `id` (`:string`) (required) - Unique HTML id required by the JS hook.
* `src` (`:string`) (required) - Video source URL.
* `poster` (`:string`) - Poster image URL. Defaults to `nil`.
* `type` (`:string`) - Video MIME type. Defaults to `"video/mp4"`.
* `aspect_ratio` (`:atom`) - Defaults to `:video`. Must be one of `:video`, `:square`, `:portrait`, or `:auto`.
* `controls` (`:boolean`) - Show custom controls. Defaults to `true`.
* `autoplay` (`:boolean`) - Defaults to `false`.
* `muted` (`:boolean`) - Defaults to `false`.
* `loop` (`:boolean`) - Defaults to `false`.
* `preload` (`:atom`) - Defaults to `:metadata`. Must be one of `:none`, `:metadata`, or `:auto`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*