Video Player API

Quick Start

1. Include the CSS and JavaScript

<link rel="stylesheet" href="styles/video-player.css">
<script src="javascript/video-player.js"></script>

2. Add the HTML

<!-- YouTube Video -->
<div class="rsl-video-player"
     data-rsl-video
     data-video-src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
     data-video-poster="thumbnail.jpg"
     data-video-title="My Video">
</div>

<!-- Self-Hosted Video -->
<div class="rsl-video-player"
     data-rsl-video
     data-video-src="video.mp4"
     data-video-poster="poster.jpg"
     data-video-title="Self-Hosted Video"
     data-video-captions="captions.vtt">
</div>

Key Features

Multi-Source Support: YouTube, Vimeo, and self-hosted MP4/WebM videos
Lazy Loading: Video content loads only when user clicks play
Custom Controls: Play/pause, progress bar, volume, captions, fullscreen
Full Keyboard Navigation: Space, arrow keys, M, F, C, 0-9 number keys
Caption/Subtitle Support: WebVTT tracks for self-hosted videos
Aspect Ratios: 16:9, 4:3, 1:1, 9:16, 21:9
FilterBus Integration: Filter video galleries by category
Dark Mode: Automatic theme support
WCAG 2.1 AA: Full screen reader support with live announcements

Data Attributes API

Attribute	Values	Default	Description
`data-rsl-video`	(presence)	-	Marks element for auto-initialization
`data-video-src`	URL	Required	Video URL (YouTube, Vimeo, or direct file)
`data-video-type`	`youtube` \| `vimeo` \| `self`	Auto-detect	Video source type (auto-detected from URL)
`data-video-poster`	URL	none	Thumbnail/poster image URL
`data-video-title`	string	"Video"	Video title for accessibility
`data-video-aspect`	`16:9` \| `4:3` \| `1:1` \| `9:16` \| `21:9`	16:9	Video aspect ratio
`data-video-size`	`sm` \| `md` \| `lg` \| `full`	none	Max-width constraint
`data-video-autoplay`	`true` \| `false`	false	Auto-play when visible (requires muted)
`data-video-muted`	`true` \| `false`	false	Start video muted
`data-video-loop`	`true` \| `false`	false	Loop video playback
`data-video-controls`	`true` \| `false`	true	Show custom controls
`data-video-lazy`	`true` \| `false`	true	Lazy load video on play click
`data-video-captions`	URL	none	WebVTT caption file URL (self-hosted only)
`data-video-start`	seconds	0	Start time in seconds
`data-video-end`	seconds	none	End time in seconds
`data-video-category`	string	none	Category for FilterBus integration

JavaScript API

Method	Parameters	Description
`RSL.VideoPlayer.init()`	-	Initialize all video players on the page
`RSL.VideoPlayer.create(element, options)`	element: HTMLElement, options: Object	Create a video player programmatically
`RSL.VideoPlayer.getInstance(element)`	element: HTMLElement \| string	Get player instance for an element
`RSL.VideoPlayer.destroy(element)`	element: HTMLElement \| string	Destroy a video player
`instance.play()`	-	Play the video
`instance.pause()`	-	Pause the video
`instance.seek(time)`	time: number (seconds)	Seek to specific time
`instance.setVolume(vol)`	vol: number (0-1)	Set volume level
`instance.mute()`	-	Mute audio
`instance.unmute()`	-	Unmute audio
`instance.getState()`	-	Get current player state

// Create a video player programmatically
const player = RSL.VideoPlayer.create('#my-player', {
    src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
    poster: 'thumbnail.jpg',
    title: 'My Video',
    aspect: '16:9'
});

// Control playback
player.play();
player.pause();
player.seek(30); // Jump to 30 seconds
player.setVolume(0.5); // 50% volume

// Get current state
const state = player.getState();
console.log(state.isPlaying, state.currentTime);

Keyboard Navigation

The video player supports comprehensive keyboard controls for accessibility:

Key	Action
Space or K	Play / Pause
←	Seek back 5 seconds
→	Seek forward 5 seconds
J	Seek back 10 seconds
L	Seek forward 10 seconds
↑	Volume up 10%
↓	Volume down 10%
M	Toggle mute
F	Toggle fullscreen
C	Toggle captions
0 - 9	Seek to 0% - 90% of video
Home	Go to beginning
End	Go to end

Accessibility

WCAG 2.1 AA Compliant

The Video Player component is built with accessibility as a core requirement, not an afterthought.

Screen Reader Support

role="application" on container for keyboard capture
aria-live="polite" region announces state changes
All controls have descriptive aria-label attributes
Progress slider uses role="slider" with proper ARIA attributes
Hidden instructions available for screen reader users

Visual Accessibility

High contrast focus indicators (3px solid outlines)
Touch targets minimum 44x44px on mobile
Controls always visible when paused
Respects prefers-reduced-motion

Caption Responsibility

RSL provides caption display capabilities, but you are responsible for creating accurate caption files (WebVTT format) for your video content. Captions are required for WCAG 2.1 Level A compliance.

FilterBus Integration

The Video Player integrates with RSL's FilterBus for creating filterable video galleries:

<!-- Filter Controls -->
<div data-rsl-filter data-filterbus-key="video-category">
    <button data-filter-value="tutorials">Tutorials</button>
    <button data-filter-value="demos">Demos</button>
    <button data-filter-value="webinars">Webinars</button>
</div>

<!-- Video Gallery -->
<div class="slot-layout" data-cols-md="2" data-cols-lg="3">
    <div class="slot-item">
        <div class="rsl-video-player" data-rsl-video
             data-video-src="tutorial-1.mp4"
             data-video-category="tutorials"></div>
    </div>
    <div class="slot-item">
        <div class="rsl-video-player" data-rsl-video
             data-video-src="demo-1.mp4"
             data-video-category="demos"></div>
    </div>
</div>

Next Steps

See Examples

View examples.html for comprehensive demos

Try the Playground

Test features in playground.html

Explore Components

Browse all RSL components