Sign Language Video Demo

Accessibility Feature for Deaf Users

What is Sign Language Video?

Sign Language Video overlays a secondary video (showing a sign language interpreter) on top of your main video. This is different from Picture-in-Picture (PiP) which pops the video out of the browser.

Key Features:

✓ Automatically syncs playback with the main video
✓ Syncs seeking, play/pause, and playback speed
✓ Users can toggle it on/off with a button
✓ Can be positioned in any corner (bottom-right is default)
✓ Interpreter video is muted (main audio plays)

Demo 1: Using Data Attributes Only (Pure HTML)

This video is initialized only with data attributes - no JavaScript required! Click the sign language button in the controls.

<!-- This is the actual code used above -->
<video 
  data-vidply
  data-sign-language-src="media/wwa_sign.mp4"
  data-sign-language-button="true"
  data-sign-language-position="bottom-right"
  data-controls="true"
  data-captions="true"
  poster="media/wwa_thumbnail.jpg"
>
  <source src="media/wwa.mp4" type="video/mp4">
  <track kind="captions" src="captions_en.vtt" srclang="en">
</video>

<!-- Include VidPly (auto-initializes) -->
<script type="module" src="dist/vidply.esm.min.js"></script>
      

Demo 2: JavaScript Initialization

This video uses JavaScript initialization for more control. Click the sign language button in the controls.

JavaScript Controls (Try these!)

// HTML Setup
<video id="my-video" src="main-video.mp4"></video>

// JavaScript Initialization
import Player from './dist/vidply.esm.js';

const player = new Player('#my-video', {
  // Enable sign language video
  signLanguageSrc: 'path/to/sign-language-video.mp4',
  signLanguageButton: true,
  signLanguagePosition: 'bottom-right'
});

// Control via JavaScript
player.enableSignLanguage();   // Show interpreter
player.disableSignLanguage();  // Hide interpreter
player.toggleSignLanguage();   // Toggle on/off

// Listen to events
player.on('signlanguageenabled', () => {
  console.log('Sign language video is now visible');
});
      

Position Options

You can place the sign language video in any corner of the main video.

Bottom Right (Default)

Most common position
Doesn't cover important UI
Natural reading flow

signLanguagePosition: 'bottom-right'

Bottom Left

Alternative position
Good for RTL languages
Avoids controls overlap

signLanguagePosition: 'bottom-left'

Top Right

Keeps bottom clear
Good for subtitle space
Less common

signLanguagePosition: 'top-right'

Top Left

Maximum subtitle space
RTL language option
Less common

signLanguagePosition: 'top-left'

Complete Configuration Examples

Example 1: Using Data Attributes (Easy!)

The simplest way - just add data attributes to your video element:

<!-- HTML with data attributes -->
<video 
  data-vidply
  data-sign-language-src="media/interpreter.mp4"
  data-sign-language-button="true"
  data-sign-language-position="bottom-right"
  src="media/main-video.mp4"
></video>

<!-- Include VidPly -->
<script type="module" src="dist/vidply.esm.min.js"></script>
      

Example 2: JavaScript Initialization

For more control, initialize via JavaScript:

const player = new Player('#video', {
  signLanguageSrc: 'interpreter.mp4',
  signLanguageButton: true,
  signLanguagePosition: 'bottom-right'
});
      

Example 3: With Multiple Accessibility Features

const player = new Player('#video', {
  // Basic settings
  controls: true,
  captions: true,
  captionsDefault: true,
  
  // Sign language video
  signLanguageSrc: 'videos/interpreter.mp4',
  signLanguageButton: true,
  signLanguagePosition: 'bottom-right',
  
  // Audio description (alternative audio track)
  audioDescriptionSrc: 'videos/described-version.mp4',
  audioDescriptionButton: true,
  
  // Transcript
  transcript: true,
  transcriptButton: true,
  
  // Keyboard shortcuts
  keyboard: true
});
      

Example 4: Programmatic Control

// Enable sign language after 5 seconds
setTimeout(() => {
  player.enableSignLanguage();
}, 5000);

// Check current state
if (player.state.signLanguageEnabled) {
  console.log('Sign language is currently visible');
}

// Listen for user toggling it
player.on('signlanguageenabled', () => {
  analytics.track('sign_language_enabled');
});

player.on('signlanguagedisabled', () => {
  analytics.track('sign_language_disabled');
});
      

Available Data Attributes

All sign language options can be configured via data attributes:

data-sign-language-src

Path to interpreter video
Required for sign language
Example: "interpreter.mp4"

data-sign-language-button

Show toggle button
Values: "true" or "false"
Default: true

data-sign-language-position

Corner placement
Values: "bottom-right", "bottom-left", "top-right", "top-left"
Default: "bottom-right"

Other Data Attributes

data-autoplay
data-loop
data-muted
data-controls
data-captions
data-transcript
And more...

<!-- Complete example with multiple data attributes -->
<video 
  data-vidply
  data-sign-language-src="interpreter.mp4"
  data-sign-language-button="true"
  data-sign-language-position="bottom-right"
  data-audio-description-src="described.mp4"
  data-captions="true"
  data-transcript="true"
  src="video.mp4"
>
  <track kind="captions" src="captions.vtt" srclang="en">
</video>
      

Sign Language Video vs. Picture-in-Picture

Understanding the difference between these two features:

📺 Sign Language Video

Overlays interpreter on main video
Stays within the player
Syncs automatically
For deaf accessibility
User can toggle on/off
Positioned in corner

🎬 Picture-in-Picture (PiP)

Pops video out of browser
Floats on desktop/screen
For multitasking
Watch while working
Browser feature
User can move anywhere

// Sign Language Video - For accessibility
player.enableSignLanguage();  // Shows interpreter overlay

// Picture-in-Picture - For multitasking
player.enterPiP();            // Pops video out of browser
      

Browser Support

Sign Language Video works in all modern browsers that support HTML5 video:

✅ Chrome 90+

Full support
Excellent performance

✅ Firefox 88+

Full support
Good performance

✅ Safari 14+

Full support
iOS compatible

✅ Edge 90+

Full support
Native performance