Video: Standard Video Player
Complete guide to the standard video player with built-in RIXL controls and analytics
Complete guide to the standard video player with built-in RIXL controls and analytics
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.
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>
);
}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.
With analytics enabled by default, the component tracks:
content_views start, watch, and end eventsplay, pause, seek, mute, volume_change, fullscreen, picture_in_picture, quality_change, settings_openProvide 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)} /><Video id="content-video" className="w-full max-w-4xl mx-auto rounded-lg shadow-lg" analyticsPage="standalone" controls /><Video id="tutorial-video" className="w-full h-auto" analyticsPage="standalone" autoPlay={false} controls /><Video id="promo-video" className="w-full max-w-5xl mx-auto rounded-2xl shadow-2xl" analyticsPage="standalone" controls />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>
);
}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.