Basic Usage

Importing the Video Component

import { Video } from '@rixl/videosdk-react';

Essential Props

Every Video component needs at minimum:

<Video
  id="D3OCjdLP60" // Required: Your media ID from dash.rixl.com
  className="w-full h-auto" // Recommended: Basic styling
/>

Simple Video Player Example

Here's a basic implementation with common settings:

import { Video } from '@rixl/videosdk-react';

function BasicVideoPlayer() {
  return (
    <div className="max-w-4xl mx-auto">
      <Video
        id="D3OCjdLP60"
        className="w-fit h-fit bg-transparent rounded-lg"
        progressBar={true}
        allowFullscreen={true}
        allowPictureInPicture={true}
        volume={0.8}
      />
    </div>
  );
}

Common Use Cases

Hero Video (Autoplay Background)

function HeroVideo() {
 return (
     <section className="relative h-screen overflow-hidden">
         <Video
             id="D3OCjdLP60"
             className="absolute inset-0 w-full h-full object-cover"
             autoPlay={true}
             muted={true} // Required for autoplay in most browsers
             loop={true}
             progressBar={false}
             allowPlayPause={false}
             allowFullscreen={false}
         />
         <div className="relative z-10 flex items-center justify-center h-full">
             <h1 className="text-6xl font-bold text-white">Welcome</h1>
         </div>
     </section>
 );
}

See it in action: Check out the AutoPlay Background video for a complete background video autoplay implementation.

Content Video (Standard Player)

function ContentVideo() {
  return (
    <article className="max-w-3xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">Product Demo</h2>

      <Video
        id="D3OCjdLP60"
        className="w-full h-auto rounded-lg shadow-lg mb-4"
        progressBar={true}
        allowFullscreen={true}
        allowPictureInPicture={true}
        theme="default"
        volume={1.0}
      />

      <p className="text-gray-600">
        Watch our comprehensive product demonstration...
      </p>
    </article>
  );
}

See it in action: Check out the Standard player video example for a complete standard video player implementation.

Video Gallery/Playlist

import { useState } from 'react';

const videoList = [
  { id: 'D3OCjdLP60', title: 'Introduction', duration: '2:30' },
  { id: 'ABC123XYZ', title: 'Getting Started', duration: '5:45' },
  { id: 'DEF456UVW', title: 'Advanced Features', duration: '8:15' }
];

function VideoGallery() {
  const [currentVideo, setCurrentVideo] = useState(videoList[0]);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Main Player */}
      <div className="lg:col-span-2">
        <Video
          key={currentVideo.id} // Important: Force re-render on video change
          id={currentVideo.id}
          className="w-full h-auto rounded-lg"
          progressBar={true}
          allowFullscreen={true}
          allowPictureInPicture={true}
        />
        <h3 className="text-xl font-semibold mt-3">{currentVideo.title}</h3>
      </div>

      {/* Playlist */}
      <div className="space-y-3">
        <h4 className="font-semibold">Playlist</h4>
        {videoList.map((video) => (
          <button
            key={video.id}
            onClick={() => setCurrentVideo(video)}
            className={`w-full p-3 text-left rounded-lg border ${
              currentVideo.id === video.id
                ? 'border-blue-500 bg-blue-50'
                : 'border-gray-200 hover:bg-gray-50'
            }`}
          >
            <div className="font-medium">{video.title}</div>
            <div className="text-sm text-gray-500">{video.duration}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

Best Practices

Aspect Ratio: Use w-fit h-fit classes to respect the video's natural aspect ratio, preventing distortion.

Autoplay: Always set muted={true} when using autoPlay={true} to comply with browser autoplay policies.

Performance: For video galleries, use the key prop to ensure proper component re-initialization when switching videos.