PhiaUi.Components.VideoPlayer (phia_ui v0.1.17)

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 />

Summary

Functions

video_player(assigns)

Renders a video player component.

Functions

video_player(assigns)

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.