A production-ready web component for HLS and DASH adaptive streaming. Drop one script tag into any website. Quality selector, subtitles, seek thumbnails, auto format detection. Zero build step. Zero npm install.
<!-- Add to your HTML — that's it --> <script src="https://cdn.jsdelivr.net/gh/RoncoJhon/shaka-hls-dash-player/shaka-hls-dash-player.js"></script> <shaka-hls-dash-player base-url="https://cdn.example.com/my-video/" ></shaka-hls-dash-player>
HLS on Apple devices (native playback), DASH everywhere else (AV1 codec support via MSE).
Adaptive bitrate by default with manual resolution override. Works with HLS quality levels and DASH representations.
WebVTT subtitles auto-discovered from the manifest. Toggle with the captions button or press C.
Hover the progress bar for thumbnail previews via VTT sprite sheets. Same experience as YouTube and Netflix.
One script tag, one custom element. No framework required. Works in React, Vue, Svelte, plain HTML.
If DASH playback fails on a device, the player automatically retries with HLS. No viewer intervention needed.
Live Demo
One script tag loads the web component. Shaka Player is fetched from CDN automatically.
Set base-url to your video folder. The component discovers manifests, subtitles, thumbnails, and poster automatically.
The player picks the best format for the device — HLS for Apple, DASH for everything else — and streams adaptively.
One script, one tag. The component loads all dependencies automatically from CDN.
<script src="https://cdn.jsdelivr.net/ gh/RoncoJhon/shaka-hls-dash-player /shaka-hls-dash-player.js"></script> <shaka-hls-dash-player base-url="/videos/my-video/" ></shaka-hls-dash-player>
Download shaka-hls-dash-player.js into your video folder and reference it locally. No CDN needed.
your-video/ shaka-hls-dash-player.js master.m3u8 manifest.mpd 720p/ 1080p/ subtitles/ thumbnails/
| Key | Action |
|---|---|
| Space / K | Play / Pause |
| F | Toggle fullscreen |
| M | Mute / Unmute |
| ← / → | Seek −5s / +5s |
| ↑ / ↓ | Volume up / down |
| C | Toggle subtitles |
| Browser | Format | AV1 | H.264 |
|---|---|---|---|
| Chrome 70+ | DASH (Shaka + MSE) | Yes | Yes |
| Firefox 67+ | DASH (Shaka + MSE) | Yes | Yes |
| Edge 79+ | DASH (Shaka + MSE) | Yes | Yes |
| Safari 14+ | HLS (native) | 16.4+ | Yes |
| iOS Safari | HLS (native) | 17+ | Yes |
The player auto-discovers all resources from the standard multi-resolution folder output. Only manifests are required — everything else is optional.
your-video/
├── master.m3u8 HLS master playlist
├── manifest.mpd DASH manifest
├── 240p/
│ ├── init.mp4
│ ├── chunk_0.m4s
│ └── video.m3u8
├── 720p/ ...
├── 1080p/ ...
├── subtitles/
│ ├── english.vtt
│ └── spanish.vtt
├── thumbnails/
│ ├── thumb_0001.jpg
│ └── thumbnails.vtt
├── poster/
│ └── hd_image.jpg
└── preview/
└── preview.mp4
DASH/HLS Packager converts any video into multi-resolution HLS & DASH in one pass — with thumbnails, subtitles, dual manifests, and this player included.