Overview

Overview

The Video component plays RIXL video content using adaptive HLS streaming. It is implemented as a Lit web component (<rixl-video>) and wrapped for React so analytics and playback behavior are consistent across every framework.

The player ships with a built-in control bar and multiple themes (default, minimal, feed, hover, hideUI). You can also hide the built-in UI and build your own controls as siblings of the component.

Quick Example

import {Video} from "@rixl/media-react";

function Player() {
  return (
    <Video
      id="your-video-id"
      className="w-full h-auto rounded-lg"
      analyticsPage="standalone"
      onRixlAnalytics={(e) => console.log(e.detail.event)}
    />
  );
}

Key Capabilities

Streaming & Playback

• HLS playback with automatic hls.js fallback
• Muted autoplay by default for browser compliance
• Custom Lit player with configurable control bar
• src override for direct streams
• videoData for pre-fetched metadata

Analytics

• content_views start/watch/end events with segments
• Interaction events: play, pause, seek, mute, volume_change, fullscreen, picture_in_picture, quality_change, settings_open
• Error events: video_load_error, video_api_error, and hls_* errors
• feed_id, post_id, and page context support

Customization

• theme, controls, progressBar, allowFullscreen, allowPictureInPicture, heatmap, chapters, hotSegments, and more
• CSS class customization through className
• Responsive design with aspect ratio preservation

Custom Controls

Need custom controls? Use theme="hideUI" and render your own controls as siblings, or use the legacy player-scope hooks documented in Hooks.

The recommended patterns are:

1. Built-in UI — pass theme, controls, progressBar, allowFullscreen, etc.
2. Custom sibling controls + onRixlAnalytics — hide the UI and build your own control bar.

When to Use

The Video component is perfect for:

• Content platforms requiring professional video playback
• E-learning applications with adaptive streaming
• Marketing websites needing background or promotional videos
• Documentation sites with instructional video content
• Mobile-first applications requiring adaptive streaming

Browser Support

Works seamlessly across all modern browsers. hls.js provides HLS playback support where native support is absent.