Examples
Basic (no source)
Minimal player with no src configured. Video.js renders its empty/error state for missing
media.
Playback rates + muted autoplay
Player configured with selectable playback rates and a muted autoplay loop (required by browsers for unattended playback).
With toolbar
Player paired with a PatternFly-styled toolbar that calls the Alpine API to control playback.
Documentation
Video player props
Parameters accepted by {#include components/media/video-player id="..." /}. The
main block ({#content}{/content}) renders above the video surface — use it for
toolbars or overlays that talk to the player's Alpine API.
| Name | Type | Default | Description |
|---|---|---|---|
id
|
String | — (required) |
DOM id of the wrapper; derives {id}-field on the
<video-js> element that Video.js attaches to.
|
src / type
|
String | — |
Media URL and its MIME type (e.g. video/mp4). Omit both for a source-less
player.
|
poster
|
String (URL) | — | Image shown before playback starts. |
height
|
String (CSS length) | — | Fixed height for the video surface; by default the player is fluid and sizes to its container. |
autoplay / loop /
muted
|
boolean | false |
Standard media flags. Browsers only honor autoplay together with
muted=true.
|
controls
|
boolean | true | Show Video.js's own control bar. |
preload
|
String | auto |
Passed through to the media element: auto,
metadata or none.
|
fluid
|
boolean | true | Scale the player to fit its container while keeping aspect ratio. |
playbackRates
|
String (JSON array) | — |
Selectable speeds for the control bar, e.g. "[0.5, 1, 1.5, 2]".
|
Usage
Required assets. The component needs the vendored Video.js bundle and the pha wrapper loaded on the
host page: /web/vendor/videojs/video-js.min.css,
/web/css/components/video-player.css,
/web/vendor/videojs/video.min.js and
/web/js/alpine/components/video-player.js (both scripts before Alpine).
Alpine API. The wrapper exposes toggle(),
seek(seconds) and mute() plus
ready and playing state — anything placed in the
component's content slot (like the toolbar example) can bind to them directly.
Autoplay policy. Browsers block unmuted autoplay; combine
autoplay=true with muted=true (and usually
loop=true) for ambient background video.