A production-ready Video.js player you can drop into any website. Plays HLS and DASH adaptive streams with quality selection, subtitles, thumbnails, and automatic device detection. Zero build step. Zero npm install.
<!-- Add to your HTML — that's it --> <script src="https://cdn.jsdelivr.net/gh/RoncoJhon/videojs-hls-dash-player/player.js"></script> <hls-dash-player base-url="https://cdn.roncodev.com/demo-video/"></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 both HLS quality levels and DASH representations.
WebVTT subtitles auto-discovered from the manifest. Includes HLS fallback parsing for maximum compatibility.
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 — anything.
If DASH playback fails on a device, the player automatically retries with HLS. No viewer intervention needed.
Live Preview
One script, one tag. The component loads all dependencies automatically from CDN.
<script src="https://cdn.jsdelivr.net/ gh/RoncoJhon/videojs-hls-dash-player /player.js"></script> <hls-dash-player base-url="/videos/my-video/" ></hls-dash-player>
Copy index.html into your video folder and serve it. Full control over every detail.
your-video/ index.html <-- the player master.m3u8 <-- HLS manifest manifest.mpd <-- DASH manifest 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 |
The player auto-detects manifests, subtitles, thumbnails, poster, and preview from the standard multi-resolution folder structure:
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 generates everything this player needs — multi-resolution video, thumbnails, subtitles, dual manifests — from any video file, in one pass.