Basic Usage

Importing the Video Component

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

Essential Props

Every Video component needs at minimum:

<Video
  id="your-video-id" // Required: Your video ID from dash.rixl.com/videos
/>

The id prop is mapped to videoId on the underlying <rixl-video> web component.

Simple Video Player

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

function BasicVideo() {
  return (
    <div className="max-w-4xl mx-auto">
      <Video id="your-video-id" className="w-full h-auto rounded-lg" analyticsPage="standalone" />
    </div>
  );
}

Listening to Analytics Events

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

function AnalyticsVideo() {
  return (
    <Video
      id="your-video-id"
      analyticsPage="standalone"
      onRixlAnalytics={(e) => {
        console.log("Analytics event:", e.detail.event);
      }}
    />
  );
}

Lit / Vanilla HTML

<script type="module">
  import "@rixl/media-lit/video";

  const video = document.querySelector("rixl-video");
  video.addEventListener("rixl-analytics", (e) => {
    console.log(e.detail.event);
  });
</script>

<rixl-video video-id="your-video-id" analytics-page="standalone"></rixl-video>

Common Use Cases

function HeroVideo() {
  return (
    <section className="relative h-screen overflow-hidden">
      <Video
        id="hero-video-id"
        autoPlay
        muted
        className="absolute inset-0 w-full h-full object-cover"
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-4xl font-bold text-white">Welcome</h1>
      </div>
    </section>
  );
}

Autoplay Preview

function HoverPreview() {
  return (
    <div className="w-64 aspect-video">
      <Video id="preview-video-id" autoPlay muted className="w-full h-full object-cover" />
    </div>
  );
}

Feed Video

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

function FeedPage() {
  return <Feed feedId="my-feed" analyticsPage="feed" onRixlAnalytics={(e) => console.log(e.detail.event)} />;
}

Custom Control UI

The built-in RIXL player provides a default control bar, but you can also build your own controls with theme="hideUI" and drive the player from onRixlAnalytics or your own state.

function CustomControlsVideo() {
  return (
    <div className="relative w-full aspect-video">
      <Video id="video-id" theme="hideUI" className="w-full h-full" />
      {/* Render your own controls here as siblings */}
    </div>
  );
}

See the Player Controls guide for all available UI props.

Best Practices

Aspect Ratios: Use CSS aspect-ratio classes to prevent layout shifts during video loading.

Autoplay: The SDK mutes autoplay by default to satisfy browser policies. For background videos, keep muted={true}.

Custom themes: Use theme, controls, progressBar, allowFullscreen, heatmap, chapters, and other UI props to configure the built-in player. All of these are forwarded to the Lit element.

Auf dieser Seite