HopeVideo JS - Playlist Demo

Playlist Control Panel

This demo lets you edit playlistConfig and playlist items. Apply will validate source URLs and then re-mount the players.

Player

Player ID?Unique identifier used by your registry / manager. Keep it stable for debugging.Muted?Recommended for autoplay compatibility.Autoplay?Initial playback attempt. Playlist autoplayNext controls subsequent items.Ads (Player)?Global player-level ads switch for the demo. playlistConfig.ads.enabled is the playlist engine behavior.

playlistConfig

Start Index?Which playlist item to start from (0-based).Start Mode?after_current: start from index after current source ends. immediately: switch to startIndex right away.Loop?If true, wraps around when reaching the end of the playlist.Autoplay Next?If true, automatically starts the next item when the current item ends.Prefer HLS?If true and HLS exists for an item, choose HLS over MP4 unless fallback rules apply.Prefer Selected MP4?If true, MP4 selection uses the 'selected' flag (single selected per item recommended).onItemChange?Demo callback mode. Functions aren't persisted; on Apply we attach a real handler (none / console / dataLayer).onBeforePlay?Demo callback mode. Runs before starting an item.

playlistConfig.ads

Enabled?Playlist-level ads behavior. This is independent from the player-level ads switch.Request On Item Change?If true, requests a new ad when playlist item changes.Request On Fallback?If true, requests an ad when falling back due to source errors.

playlistConfig.error

Enabled?If true, playlist attempts fallback / skipping when sources fail.Switch Mode On Error?If true, can switch HLS<->MP4 preference when errors happen.Skip To Next On Both Fail?If true, when both HLS and MP4 options fail for an item, the playlist will advance to the next item.Debounce (ms)?Debounces error handling to avoid rapid source switching storms.

DataLayer

Enabled?If true, playlist emits events into dataLayer using the configured event name and triggers.Event Name?Value used for emitted playlist events. You referenced HopePlayerVideoEvents.Trigger: change?DataLayer trigger name when playlist item changes.Trigger: fallback?DataLayer trigger when playlist falls back due to errors.Trigger: skipped?DataLayer trigger when an item is skipped after failures.

Playlist Items

Each item can have HLS and/or MP4 sources. Apply is blocked if any visible row has an empty src.

Item #1

HLS?HLS sources for this playlist item. preferHls=true uses these first.

MP4?MP4 sources for this playlist item. You can add multiple and pick one as selected.

selected

Item #2

HLS?HLS sources for this playlist item. preferHls=true uses these first.

MP4?MP4 sources for this playlist item. You can add multiple and pick one as selected.

selected

Item #3

HLS?HLS sources for this playlist item. preferHls=true uses these first.

MP4?MP4 sources for this playlist item. You can add multiple and pick one as selected.

selected

Demo Content

Scroll and interact with the player. Playlist should change sources as items end (depending on autoplayNext/loop/startMode).

HopeVideoJS is a flexible and customizable video player solution based on Video.js, developed by Umut Yaldız. HopeVideoJS offers a modern and powerful media playback experience with its open source structure.

HopeVideo JS - Playlist Demo

Playlist Control Panel

Player

playlistConfig

playlistConfig.ads

playlistConfig.error

DataLayer

Playlist Items

Demo Content

Logs