Player Controls

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.

Built-in UI

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

Standard Media Attributes

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`.

Themes

Full control bar with progress, volume, fullscreen, PiP, settings, and chapters.

<Video id="video-id" theme="default" />

Analytics Events

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);
  }}
/>

Custom Control Bars

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.

Keyboard Shortcuts

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

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.