Video Component
Overview
Feature-rich video player for RIXL content with HLS streaming, quality selection, and advanced controls
The Video component is a professional-grade video player optimized for media platforms. It delivers adaptive streaming with automatic quality selection, comprehensive accessibility features, and a customizable interface that works seamlessly across all modern browsers and devices.
Custom Controls
Need custom controls instead of the built-in UI? Use the public Hooks section.
The supported pattern is:
- inline controls inside
<Video theme="hideUI"> - detached sibling controls inside
<VideoPlayer>
The public player hooks are zero-argument and resolve the current player from scope.
Key Capabilities
Streaming & Quality
- Adaptive streaming with automatic quality selection
- Manual quality control (360p to 4K)
Accessibility & Localization
- Multi-language subtitle support with custom styling
- Multiple audio track selection
- Screen reader compatible controls
- Keyboard navigation support
Player Controls
- Picture-in-Picture mode
- Fullscreen support
- Custom progress bar and volume controls
- Play/pause, seeking, and loop functionality
Customization
- Multiple theme options (default, minimal, hover, feed, hidden)
- Hover theme for Netflix-style play-on-hover video previews
- CSS class customization
- Responsive design with aspect ratio preservation
All videos are automatically optimized for your users' devices and connection speeds. No additional configuration required for basic usage.
When to Use
The Video component is perfect for:
- Content platforms requiring professional video playback
- E-learning applications with subtitle and quality requirements
- Marketing websites needing background or promotional videos
- Documentation sites with instructional video content
- Mobile-first applications requiring adaptive streaming
Browser Support
Works seamlessly across all modern browsers. Automatic fallbacks ensure compatibility with older browsers while maintaining core functionality.