Props Reference

Core Props

`id` (Required)

Type: string

The unique media identifier from your RIXL dashboard. Upload your video to dash.rixl.com to get this ID.

<Video id="D3OCjdLP60" />

`className` (Optional)

Type: string | Default: undefined

CSS classes for styling the video container. Supports all CSS frameworks including TailwindCSS.

<Video
  id="D3OCjdLP60"
  className="w-full h-auto rounded-lg shadow-lg"
/>

Playback Controls

`muted` (Optional)

Type: boolean | Default: false

Controls the initial mute state of the video. Required for autoplay in most browsers.

<Video id="D3OCjdLP60" muted={true} />

`autoPlay` (Optional)

Type: boolean | Default: false

Automatically starts playback when the component loads. Must be combined with muted={true} for browser compliance.

<Video
  id="D3OCjdLP60"
  autoPlay={true}
  muted={true} // Required for autoplay
/>

Many modern browsers block videos from playing audio automatically to improve user experience. To ensure a video starts playing without user interaction, you must use both the muted={true} and autoPlay={true} attributes. This allows the video to begin playing silently until the user decides to unmute it.

`loop` (Optional)

Type: boolean | Default: false

Automatically restarts the video when it reaches the end.

<Video id="D3OCjdLP60" loop={true} />

`volume` (Optional)

Type: number (0.0 - 1.0) | Default: 1.0

Sets the initial volume level. Must be between 0.0 (silent) and 1.0 (full volume).

<Video id="D3OCjdLP60" volume={0.8} />

UI Controls

`progressBar` (Optional)

Type: boolean | Default: true

Shows or hides the video progress bar and scrub controls.

<Video id="D3OCjdLP60" progressBar={false} />

`allowPlayPause` (Optional)

Type: boolean | Default: true

Enables or disables play/pause controls and click-to-play functionality.

<Video id="D3OCjdLP60" allowPlayPause={false} />

`allowFullscreen` (Optional)

Type: boolean | Default: true

Shows or hides the fullscreen button and enables fullscreen functionality.

<Video id="D3OCjdLP60" allowFullscreen={true} />

`allowPictureInPicture` (Optional)

Type: boolean | Default: true

Enables Picture-in-Picture mode support for supported browsers.

<Video id="D3OCjdLP60" allowPictureInPicture={true} />

Advanced Features

`theme` (Optional)

Type: 'default' | 'minimal' | 'hideUI' | Default: 'default'

Selects the player theme and control styling.

<Video id="D3OCjdLP60" theme="minimal" />

Available Themes:

'default' - Full-featured player with all standard controls
'minimal' - Clean, simplified interface with Progressbar and Mute button only
'hideUI' - No UI is shown and all playback controls are completely hidden, providing the user with no control over the video.

`lang` (Optional)

Type: "en" | "de" | "es" | "fr" | "it" | "pl" | "ru" | "tr" | "uk" | Default: 'en'

Sets the language of the player.

<Video id="D3OCjdLP60" lang="de" />

Analytics

`analytics` (Optional)

Type: boolean | Default: true

Enables built-in view tracking and engagement analytics. When enabled, the SDK automatically tracks video views, watch duration, and engagement metrics.

<Video id="D3OCjdLP60" analytics={true} />

`analyticsPage` (Optional)

Type: "feed" | "standalone" | "profile" | Default: "standalone"

Specifies the page context for analytics reporting. This helps segment your analytics data by where the video is being viewed.

<Video id="D3OCjdLP60" analyticsPage="feed" />

Available Contexts:

'standalone' - Video on its own dedicated page
'feed' - Video within a scrolling feed
'profile' - Video on a user profile page

Engagement Features

`heatmap` (Optional)

Type: boolean | Default: false

Displays a visual heatmap overlay on the progress bar showing viewer engagement patterns. Brighter areas indicate sections with higher viewership.

<Video id="D3OCjdLP60" heatmap={true} />

`resumeProgress` (Optional)

Type: boolean | Default: false

Automatically resumes playback from where the user previously stopped watching. Progress is stored locally per video.

<Video id="D3OCjdLP60" resumeProgress={true} />

`chapters` (Optional)

Type: boolean | Default: false

Enables video chapters on the progress bar. When enabled, chapters you've added to the video on your RIXL dashboard will be displayed, allowing viewers to quickly navigate to specific sections of the video—similar to YouTube chapters.

<Video id="D3OCjdLP60" chapters={true} />

To use chapters, first add them to your video in the RIXL dashboard. Each chapter requires a timestamp and title. Once added, enable this prop to display them in the player.

TypeScript Interface

interface VideoProps extends HTMLProps<HTMLVideoElement> {
  // Core
  id: string;
  className?: string;

  // Playback
  muted?: boolean;
  autoPlay?: boolean;
  loop?: boolean;
  volume?: number;

  // UI Controls
  progressBar?: boolean;
  allowPlayPause?: boolean;
  allowFullscreen?: boolean;
  allowPictureInPicture?: boolean;

  // Theme & Localization
  theme?: "default" | "minimal" | "hideUI";
  lang?: "en" | "de" | "es" | "fr" | "it" | "pl" | "ru" | "tr" | "uk";

  // Analytics
  analytics?: boolean;
  analyticsPage?: "feed" | "standalone" | "profile";

  // Engagement Features
  heatmap?: boolean;
  resumeProgress?: boolean;
  chapters?: boolean;
}