HLS Video Stream

Who it’s for

Operators and security teams monitoring cameras or process lines ask “how do I put a live or recorded HLS feed on my dashboard that works the same way across Safari and Chrome-based browsers?” They already have a media server, NVR, or camera producing an .m3u8 playlist, and want to view it on the dashboard rather than manage the stream itself.

What it does

A data key resolves to https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8, and the widget starts playing it within a couple of seconds — through hls.js in Chrome, Firefox, or Edge, or through the browser’s own HLS engine in Safari.

• Works the same way across browsers — hls.js on Chrome, Firefox, and Edge, and the browser’s own HLS engine on Safari, with no separate setup for either.
• Detects live vs. recorded from the playlist itself, and adjusts seeking and playback to match. There is nothing to configure.
• A configurable seek-back window for live playback, so viewers can rewind a few seconds without turning the stream into a full recording.
• Pauses downloading a live stream while its browser tab is hidden, and resumes right at the live edge, not a stale buffer, once the tab is visible again.
• Keeps playing in Picture-in-Picture even if the widget itself is torn down — for example, when you switch the dashboard’s target entity — until the viewer closes the PiP window.
• Plays one stream from one data key; it doesn’t record, transcode, or show more than one camera in a single widget.

Requirements

This widget needs something to point it at: a media server, NVR, or camera that already serves a live or recorded stream as an HLS (.m3u8) playlist. It plays that stream; it doesn’t provide one.

How to set up

Data keys

Key	Role	Type	Description
Any name (hlsStreamUrl by default)	Stream URL	Attribute, timeseries, or computed value	The latest value must be a full .m3u8 URL, for example https://<host>/live/camera1/index.m3u8

Add exactly one data key; the widget only reads one. If the key has no value, the widget plays Fallback stream URL from the settings below instead. If both are empty, it shows a “No stream URL configured” placeholder rather than an error.

Video streaming

Setting	Default	Effect
Fallback stream URL	Empty	Plays when the data key is empty or missing

How to customize

• To stop the stream from starting on its own — turn off Autoplay.
• To start with sound on — turn off Start muted. If the browser still blocks unmuted autoplay, the widget falls back to muted playback automatically.
• To hide the play/pause, volume, and fullscreen controls — turn off Show video controls.
• To change how far back a live stream can be rewound — set Back buffer length, in seconds (0–60). Set it to 0 to turn off seeking backward entirely.

Tips

• The widget loads hls.js from a CDN at runtime. If the network the dashboard runs on blocks outbound access to cdn.jsdelivr.net, playback fails everywhere except Safari, which uses its own built-in HLS engine instead.
• If the dashboard is served over HTTPS, use an HTTPS stream URL too — browsers block a plain HTTP video stream on an HTTPS page.
• If the widget sits in a hidden or background browser tab for more than 10 seconds while a stream is first loading, it can show a connection error the next time you view it, even though the stream itself is fine. Switch back to the tab, or use Retry, to reconnect.
• After three failed reconnect attempts on a live stream, the widget stops retrying on its own. Fix the stream, then update the data key’s value (or reopen the dashboard) to start a fresh attempt.