Video: Standard Video Player

The standard video player provides a complete, professional media experience using the RIXL Lit player with adaptive HLS streaming. This is the most common implementation for content platforms, educational sites, and any application requiring full video playback capabilities.

Live Example

Complete Implementation

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

function StandardVideoPlayer() {
  return (
    <div className="w-full aspect-video rounded-lg overflow-hidden">
      <Video
        id="your-video-id"
        className="w-full h-full"
        analyticsPage="standalone"
        controls
        theme="default"
        onRixlAnalytics={(e) => console.log(e.detail.event)}
      />
    </div>
  );
}

Core Features

Playback

The Video component renders the custom <rixl-video> element. It loads the HLS manifest returned by the RIXL API and falls back to hls.js where native HLS support is missing. Use controls, theme, progressBar, allowFullscreen, allowPictureInPicture, chapters, heatmap, and other UI props to configure the built-in player.

Analytics

With analytics enabled by default, the component tracks:

content_views start, watch, and end events
Interaction events: play, pause, seek, mute, volume_change, fullscreen, picture_in_picture, quality_change, settings_open
Error events for load and API failures

Provide analyticsPage, feedId, and postId to attribute events correctly:

<Video id="your-video-id" analyticsPage="feed" feedId="my-feed" postId="post-123" onRixlAnalytics={(e) => console.log(e.detail.event)} />

Common Configurations

Content Platform

<Video id="content-video" className="w-full max-w-4xl mx-auto rounded-lg shadow-lg" analyticsPage="standalone" controls />

Educational Platform

<Video id="tutorial-video" className="w-full h-auto" analyticsPage="standalone" autoPlay={false} controls />

Marketing/Landing Page

<Video id="promo-video" className="w-full max-w-5xl mx-auto rounded-2xl shadow-2xl" analyticsPage="standalone" controls />

Responsive Design

Make your video player adapt to different screen sizes:

function ResponsivePlayer() {
  return (
    <div className="w-full max-w-6xl mx-auto px-4">
      <div className="aspect-video w-full rounded-lg overflow-hidden">
        <Video id="your-video-id" className="w-full h-full" controls />
      </div>
    </div>
  );
}

Best Practices

Default Settings: Start with analyticsPage="standalone" for dedicated player pages and analyticsPage="feed" for posts inside <Feed>.

Autoplay Policy: The SDK mutes autoplay by default to satisfy browser policies. Use autoPlay={true} and muted={true} for background videos.

Player UI: theme, controls, progressBar, allowFullscreen, heatmap, chapters, resumeProgress, and volume are all forwarded to the Lit element. See the Props Reference for the full list.

On this page