Mixed Media Playlist

One playlist. Multiple sources. Seamless playback.

MP4 Video MP3 Audio HLS Stream YouTube Vimeo SoundCloud
Video Playlist Audio Playlist HLS Streaming DASH Streaming

Playlist below the player

Mixed media playlist with 6 items from different sources

Playlist on the right (desktop)

Same tracks as above, with panelPosition: 'right'. On viewports under 75rem wide the playlist stacks below the player.

Mixed media playlist with right-side panel on desktop

How It Works

VidPly automatically detects the media source type and loads the appropriate renderer on-the-fly. The same mixed-media playlist can use either layout shown above: playlist below the player (default) or beside it on desktop.

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.

Playlist Layout

Set panelPosition: 'right' (or data-playlist-panel-position="right") to place the playlist beside the player on viewports 75rem and wider. Below that breakpoint, both layouts stack the playlist under the media column.

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