I Built a Visual HLS Manifest Analyzer — Here’s Why

A zero-dependency, browser-based tool to decode .m3u8 playlists visually

— -

If you’ve ever worked with HLS video streaming, you’ve probably stared at raw .m3u8 files trying to make sense of variant streams, codec strings, and segment URLs. I got tired of it, so I built a tool.

HLS Manifest Viewer is a browser-based analyzer that turns raw HLS manifests into a structured, visual breakdown — no installs, no dependencies, no backend.

🔗 Live tool: https://alsameema.github.io/HLS_Manifest_Analyser/

— -

The Problem

HLS manifests are just text files. A master playlist might look like this:

EXTM3U

EXT-X-STREAM-INF:BANDWIDTH=2468000,CODECS=”mp4a.40.2,avc1.100.40",RESOLUTION=1680x750

video_2200000.m3u8

EXT-X-STREAM-INF:BANDWIDTH=68000,CODECS=”mp4a.40.2"

audio_64008.m3u8

Quick — is avc1.100.40 H.264 High or Main? Is that audio-only variant at the bottom being handled correctly? What’s the bandwidth spread across all variants?

With 20+ variants, multiple audio tracks, subtitles, and I-frames, reading this raw text gets painful fast.

— -

What the Tool Does

Paste, drop, or load a manifest URL — and the tool instantly gives you a full breakdown.

Master Playlist Analysis:

• Variant table with resolution, bandwidth, codecs decoded to human-readable names (avc1.640028 → H.264 High L4)

• Audio-only variants automatically separated from video variants

• Audio tracks from #EXT-X-MEDIA with language, channels, group, and default flag

• I-frame playlists for trick play

• Subtitles & closed captions — both inband (CEA-608/708) and sidecar (WebVTT)

• Collapsible sections with jump navigation for large manifests

Media Playlist Analysis:

• Segment count, total duration, min/max/avg segment duration stats

• Full segment URL table with copy buttons — URLs are resolved using the master playlist as base

• Segment duration bar chart — a canvas visualization showing each segment’s length with a target duration reference line

• Encryption details, init segments (#EXT-X-MAP), byte-range addressing

• Program Date-Time for live/DVR timelines

Validation:

The tool automatically flags common issues:

• Missing #EXTM3U header

• Segments exceeding TARGETDURATION

• Missing version tags

• Empty playlists

Live Manifest Support:

For live streams, it auto-refreshes at the target duration interval so you can watch the manifest evolve in real time. A pulsing LIVE badge shows the refresh status — click it to stop.

— -

Design Choices

I wanted this to be zero-friction — open a URL and use it. No npm, no React, no build step.

• Pure HTML/CSS/JS — the entire app is 3 files

• Glassmorphism UI with dark/light theme toggle

• CSS variables for full theming

• Canvas API for the segment duration chart — no charting library

• Drag-and-drop file upload + URL loading + paste

• Deployed on GitHub Pages — push and it’s live

The codec decoder handles H.264, H.265, AV1, VP9, AAC, HE-AAC, Dolby AC-3/EC-3, Dolby Vision, Opus, FLAC, WebVTT, and TTML — covering the vast majority of real-world HLS streams.

— -

Try It

Live: https://alsameema.github.io/HLS_Manifest_Analyser/

Source: https://github.com/ALSAMEEMA/HLS_Manifest_Analyser

It’s MIT licensed. If you work with HLS — whether you’re an encoder engineer, QA tester, or streaming platform developer — give it a spin.

Drop a ⭐ on GitHub if you find it useful. PRs welcome.

Tags: HLS, Video Streaming, Open Source, Web Development, JavaScript, OTT, Streaming Media