TypeScript Component
Video Overlay
A transparent video overlay system with fade effects and HEVC alpha channel support. Perfect for visual effects, transitions, and decorative overlays.
Interactive Demo
Toggle different overlay effects to see how they work. The checkerboard pattern shows transparency.
🎥
Background Content
100%
300
0
Features
🎞️ HEVC Alpha Support
Automatic detection and use of HEVC videos with alpha channels.
🌟 Smooth Transitions
Configurable fade in/out with customizable duration.
🎨 Visual Effects
Built-in effects: vignette, particles, gradients, and scanlines.
🖥️ Full Control
Complete API for positioning, opacity, and playback control.
Usage
import { VideoOverlay } from 'move.gl';
const overlay = new VideoOverlay({
containerId: 'overlay-container',
videoUrl: 'overlay.mp4',
loop: true,
autoplay: true,
opacity: 0.8,
fadeInDuration: 500,
fadeOutDuration: 300
});
// Control methods
overlay.show();
overlay.hide();
overlay.setOpacity(0.5);
overlay.fadeIn(1000);
overlay.fadeOut(500);
// Check HEVC alpha support
const supported = VideoOverlay.supportsHevcAlpha();
HEVC Alpha Detection
// The component automatically detects HEVC alpha support
if (VideoOverlay.supportsHevcAlpha()) {
// Use HEVC video with alpha channel
overlay.setVideoUrl('overlay-alpha.mov');
} else {
// Fallback to WebM with alpha or CSS effects
overlay.setVideoUrl('overlay-alpha.webm');
}