Player Controls
Guide to the Rixl video player controls, UI themes, and analytics events
Guide to the Rixl video player controls, UI themes, and analytics events
The React Video component is a @lit/react wrapper around the Lit <rixl-video> element. It is a custom player, not a raw HTML <video>. You configure the built-in UI with props such as theme, controls, progressBar, allowFullscreen, and allowPictureInPicture, or build your own controls with theme="hideUI" and onRixlAnalytics.
The <rixl-video> player ships with a built-in control bar and several themes.
| Prop | Type | Default | Description |
|---|---|---|---|
controls | boolean | true | Show the built-in control bar. |
theme | string | default | default, minimal, feed, hover, hideUI. |
progressBar | boolean | true | Show the progress/seek bar. |
showChapters | boolean | true | Render chapter markers on the progress bar. |
heatmap | boolean | true | Show an engagement heatmap overlay when data is available. |
hotSegments | boolean | false | Highlight hot (high-engagement) segments. |
allowPlayPause | boolean | true | Allow play/pause toggles. |
allowFullscreen | boolean | true | Allow fullscreen toggles. |
allowPictureInPicture | boolean | true | Allow picture-in-picture toggles. |
autoHideMs | number | 3000 | Time before the UI hides after inactivity. |
hideUI | boolean | false | Hide the entire built-in UI. |
import {Video} from "@rixl/media-react";
<Video id="your-video-id" controls theme="default" progressBar allowFullscreen />The player also accepts standard media attributes, which it forwards to the underlying media element:
| Attribute | Type | Description |
|---|---|---|
autoPlay | boolean | Start playback as soon as the video can play. |
muted | boolean | Mute audio by default. |
loop | boolean | Loop playback when the video ends. |
playsInline | boolean | Prefer inline playback on mobile browsers. |
poster | string | URL of an image to show before the video loads. |
volume | number | Initial volume level from 0 to 1. |
Full control bar with progress, volume, fullscreen, PiP, settings, and chapters.
<Video id="video-id" theme="default" />The video component emits rixl-analytics events through onRixlAnalytics. These events describe how users interact with the player:
| Event | Type | Description |
|---|---|---|
content_view start | content_views | The video entered the viewport and started being tracked. |
content_view watch | content_views | Periodic view heartbeat while the video is visible. |
content_view end | content_views | The video left the viewport or was unmounted. |
play | interaction | The user started playback. |
pause | interaction | The user paused playback. |
seek | interaction | The user seeked to a new position. |
mute / unmute | interaction | Audio was muted or unmuted. |
volume_change | interaction | The volume level changed. |
fullscreen | interaction | Fullscreen mode was entered or exited. |
picture_in_picture | interaction | Picture-in-Picture mode was entered or exited. |
quality_change | interaction | The HLS quality level changed. |
settings_open | interaction | The player settings menu was opened. |
error | error | A media load or playback error occurred. |
<Video
id="your-video-id"
controls
analytics
analyticsPage="standalone"
onRixlAnalytics={(e) => {
console.log("Rixl analytics event:", e.detail.event);
}}
/>If you need a fully custom control bar, use theme="hideUI" and place your own controls as siblings of <Video>. You can drive them from onRixlAnalytics or from your own React state.
Do not render custom controls as children of the Video component. The Video wrapper is a self-contained Lit web component and does not
provide an internal slot for child controls.
When the player has focus, the following shortcuts are supported:
| Action | Shortcut |
|---|---|
| Play / Pause | Space or K |
| Seek forward 5 s | → |
| Seek backward 5 s | ← |
| Volume up | ↑ |
| Volume down | ↓ |
| Mute / Unmute | M |
| Toggle fullscreen | F |
| Toggle Picture-in-Picture | I (browser dependent) |
Picture-in-Picture and fullscreen can be triggered from the built-in control bar or through the allowPictureInPicture and allowFullscreen props.
Not all browsers support Picture-in-Picture. The Video component emits a picture_in_picture analytics interaction event when the
browser fires the corresponding enterpictureinpicture / leavepictureinpicture events.