Video: Standard Video Player

The standard video player provides a complete, professional media experience with all features enabled. 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/videosdk-react';

function StandardVideoPlayer() {
  return (
   <div className="w-full h-[500px]">
      <Video
        id="your-video-id"
        className="w-fit h-fit bg-transparent"
        // Playback Controls
        autoPlay={false}
        muted={false}
        loop={true}
        volume={1.0}
        // UI Controls
        progressBar={true}
        allowPlayPause={true}
        allowFullscreen={true}
        allowPictureInPicture={true}
        // Theming
        theme="default"
        // Engagement Features
        heatmap={true}
        resumeProgress={true}
      />
    </div>
  );
}

Core Features Explained

Progress Bar & Seeking

The progress bar allows users to see playback progress and seek to any point in the video.

Key Features:

• Visual Timeline: Shows current position and buffered content
• Click to Seek: Users can click anywhere on the bar to jump to that position
• Buffer Indicator: Shows how much video has been downloaded

<Video
  id="your-video-id"
  progressBar={true} // Enable progress bar
  className="w-full h-auto"
/>

Play/Pause Controls

Users can control playback with multiple methods:

Control Methods:

• Play/Pause Button: Click the button in the control bar
• Video Click: Click anywhere on the video to toggle play/pause
• Spacebar: Press spacebar for quick play/pause
• K Key: Alternative keyboard shortcut

<Video
  id="your-video-id"
  allowPlayPause={true} // Enable play/pause controls
  autoPlay={false} // Don't start automatically
/>

Volume Control

Complete audio management with visual feedback:

Features:

• Volume Slider: Adjust from 0% to 100%
• Mute Toggle: Quick mute/unmute button
• Volume Persistence: Settings remembered across page loads
• Keyboard Shortcuts: Up/Down arrows adjust volume

<Video
  id="your-video-id"
  volume={1.0} // Set initial volume (0.0 to 1.0)
  muted={false} // Start unmuted
/>

Volume Settings:

• volume={1.0} - Full volume (100%)
• volume={0.5} - Half volume (50%)
• volume={0.0} - Silent (equivalent to muted)

Quality Selection

Adaptive streaming with manual quality control:

Quality Options:

• Auto (Recommended): Automatically adjusts based on connection speed
• Other options: Depends on video

<Video
  id="your-video-id"
  quality="auto" // Recommended for most users
  className="w-full h-auto"
/>

Subtitle Support

Multi-language subtitles with extensive customization:

Features:

• Multiple Languages: Switch between available subtitle tracks
• On/Off Toggle: Easy enable/disable
• Custom Styling: Font, size, color, and background
• Accessibility: Full screen reader support

Subtitle Customization Options:

Users can customize:

• Font Family: Monospaced Serif, Sans Serif, etc.
• Font Size: 50% to 200%
• Font Color: White, Yellow, Black, and more
• Background Color: Black, transparent, semi-transparent
• Background Opacity: 0% to 100%
• Window Settings: Additional styling options

Audio Track Selection

Switch between different audio options:

Available Tracks:

• Primary Language Tracks: Main audio in different languages
• Commentary Tracks: Director's commentary, behind-the-scenes
• Descriptive Audio: For visually impaired users
• Dubbed Versions: Multiple language dubs

Example Tracks:

• English (Original)
• Spanish
• French
• Commentary (English)
• Descriptive Audio

Fullscreen Mode

Immersive viewing experience:

Entry Methods:

• Fullscreen Button: Click the icon in controls
• F Key: Keyboard shortcut

Fullscreen Features:

• Auto-hide Controls: Controls fade after inactivity
• Hover to Show: Move mouse to reveal controls
• All Features Available: Quality, subtitles, etc. work in fullscreen

<Video
  id="your-video-id"
  allowFullscreen={true} // Enable fullscreen
/>

Exit Fullscreen:

• ESC Key: Quick exit
• Fullscreen Button: Click again
• F key: Click again

Picture-in-Picture (PiP)

Floating video window for multitasking:

Features:

• Persistent Playback: Video continues while browsing
• Resizable Window: Drag corners to resize
• Moveable: Position anywhere on screen
• Basic Controls: Play/pause in PiP window

<Video
  id="your-video-id"
  allowPictureInPicture={true} // Enable PiP
/>

Use Cases:

• Video tutorials while coding
• Webinars while taking notes
• Entertainment while working

Buffer Health Display

Real-time network and buffering information

Displays:

• Buffer Level: How much video is pre-loaded
• Connection Quality: Network speed indicator
• Loading Status: Active buffering indicator

Engagement Heatmap

Display viewer engagement patterns directly on the progress bar. The heatmap shows which parts of the video have the highest viewership, helping viewers identify popular moments.

<Video
  id="your-video-id"
  heatmap={true} // Enable engagement heatmap
/>

Features:

• Visual Overlay: Brighter areas on the progress bar indicate higher viewership
• Real-time Data: Based on aggregated viewer behavior
• Non-intrusive: Blends naturally with the progress bar

Resume Progress

Automatically remember where users stopped watching and resume from that point on their next visit.

<Video
  id="your-video-id"
  resumeProgress={true} // Enable resume functionality
/>

Features:

• Automatic Save: Progress is saved as the video plays
• Per-Video Storage: Each video's progress is tracked independently
• Local Storage: Progress is stored in the browser
• Seamless Resume: Video starts from the saved position automatically

Theming Options

The player comes with three built-in themes:

<Video
    id="your-video-id"
    theme="default" // Standard theme
/>

<Video
    id="your-video-id"
    theme="minimal" // Simplified interface
/>

<Video
    id="your-video-id"
    theme="dark" // Dark interface
/>

Keyboard Shortcuts

The standard player supports comprehensive keyboard controls:

Responsive Design

Make your video player adapt to different screen sizes:

function ResponsivePlayer() {
    const isMobile = true;

  return (
    <div className="w-full max-w-6xl mx-auto px-4">
      {/* Mobile: Full width */}
      {/* Tablet: Contained with padding */}
      {/* Desktop: Max width with margin */}
      <Video
        id="your-video-id"
        className="w-full h-auto rounded-lg"
        // Adjust controls for mobile
        theme={isMobile ? "minimal" : "default"}
      />
    </div>
  );
}

Responsive Patterns:

// Maintain aspect ratio
<div className="aspect-video w-full max-w-4xl mx-auto">
  <Video id="your-video-id" className="w-full h-full" />
</div>

// Different sizes per breakpoint
<div className="w-full md:w-3/4 lg:w-2/3 xl:w-1/2 mx-auto">
  <Video id="your-video-id" className="w-full h-auto" />
</div>

Best Practices

Common Configurations

Content Platform

<Video
  id="content-video"
  className="w-full max-w-4xl mx-auto rounded-lg shadow-lg"
  progressBar={true}
  allowFullscreen={true}
  allowPictureInPicture={true}
  subtitles={true}
  audioTracks={true}
  quality="auto"
  theme="default"
/>

Educational Platform

<Video
  id="tutorial-video"
  className="w-full h-auto"
  progressBar={true}
  allowPlayPause={true}
  allowFullscreen={true}
  subtitles={true}
  volume={0.8}

/>

Marketing/Landing Page

<Video
  id="promo-video"
  className="w-full max-w-5xl mx-auto rounded-2xl shadow-2xl"
  progressBar={true}
  allowFullscreen={true}
  theme="minimal"
  volume={0.9}
/>

Troubleshooting

Video Not Playing

// Check browser autoplay policies
<Video
  id="your-video-id"
  muted={true} // Required for autoplay
  autoPlay={true}
  onError={(error) => console.error('Playback error:', error)}
/>

Quality Issues

// Force specific quality for testing
<Video
  id="your-video-id"
  quality="720p" // Lock quality
  onQualityChange={(q) => console.log('Quality changed to:', q)}
/>

Subtitles Not Showing

• Verify subtitles are available for the video
• Check subtitle language selection
• Ensure subtitles={true} is set
• Try refreshing the page