How It Works
VidPly automatically detects the media source type and loads the appropriate renderer on-the-fly:
Smart Detection
URLs are analyzed to determine if they're YouTube, Vimeo, HLS streams, or standard HTML5 media.
Lazy Loading
Heavy renderers (YouTube API, Vimeo API, HLS.js) are only loaded when needed, keeping initial load fast.
Hot Swapping
When switching tracks, the old renderer is destroyed and the new one initializes seamlessly.
Unified Controls
Same control bar works across all media types - play, pause, seek, volume, fullscreen.
Features Demonstrated
- Dynamic renderer switching - Automatically switches between HTML5, HLS.js, YouTube API, and Vimeo API
- Mixed content types - Video, audio, and streaming content in one playlist
- Cross-platform playback - Each source uses its optimal playback method
- Consistent UI - Same player controls work for all media types
- Auto-advance - Seamlessly moves to next track regardless of type
- Loop support - Playlist loops back to start after last item
- Keyboard navigation - Full accessibility across all renderers
- Per-track captions - Caption support for HTML5 media tracks
Implementation
Creating a mixed media playlist is simple - just include different source types in your track array:
const tracks = [
{ src: "video.mp4", title: "Local Video" },
{ src: "audio.mp3", title: "Local Audio" },
{ src: "https://example.com/stream.m3u8", title: "HLS Stream" },
{ src: "https://youtube.com/watch?v=...", title: "YouTube" },
{ src: "https://vimeo.com/...", title: "Vimeo" },
{ src: "https://soundcloud.com/artist/track", title: "SoundCloud" }
];
const playlist = new PlaylistManager(player, { tracks });Keyboard Shortcuts
- Shift + N - Next track
- Shift + P - Previous track
- Space - Play/Pause
- ← → - Seek backward/forward
- ↑ ↓ - Volume up/down
- M - Mute/Unmute
- F - Toggle fullscreen