Advanced M3U8/HLS/DASH player with customizable controls. Supports keyboard shortcuts, Picture-in-Picture (PiP), frame navigation, and live streams.
- Customizable controls
- Keyboard shortcuts
- Picture in Picture (PiP) mode
- Frame navigation
- Support for live streams
- Chromium DASH Widevine license URL support
For encrypted .mpd streams on Chromium browsers, the player now opens an in-player DRM popup when playback detects a DRM/key-system error.
In the popup, enter:
- Widevine license URL
- Optional request headers as key/value rows
- Add more headers as needed using the Add header button
- Optional robustness string (for example
SW_SECURE_DECODE)
Quality-of-life behavior:
- Last entered DRM values are auto-populated on next prompt
- You can remember DRM values per stream host
Typical header examples:
Authorization=Bearer <token>X-Custom-Auth=<value>
- Chrome Web Store: https://chromewebstore.google.com/detail/gcefmpmkobjndjglciibnendclkahgma?utm_source=github-readme
- Microsoft Edge Add-ons: https://microsoftedge.microsoft.com/addons/detail/m3u8hls-player-with-cust/bmlnobfgkikeejhbbdlhjinbmdcfgaef?utm_source=github-readme
- Firefox Add-ons: https://addons.mozilla.org/en-US/firefox/addon/m3u8-hls-player-with-shortcuts?utm_source=github-readme
git clone https://github.com/bishaldahal/M3U8-HLS-Player-with-Custom-Controls.git
cd M3U8-HLS-Player-with-Custom-Controls
npm install
npm run build:chrome # for Chrome/Edge
# or
npm run build:firefox # for Firefox- Chrome:
chrome://extensions→ Enable Developer mode → Load unpacked → select the extension folder - Edge:
edge://extensions→ Enable Developer mode → Load unpacked → select the extension folder - Firefox:
about:debugging→ This Firefox → Load Temporary Add-on → selectmanifest.json
npm run build # Build source files
npm run build:chrome # Build + package for Chrome/Edge
npm run build:firefox # Build + package for Firefox
npm run build:all # Build both platforms| Key | Action | Key | Action |
|---|---|---|---|
< |
Decrease playback speed by 0.1 | - |
Decrease playback speed by 0.5 |
> |
Increase playback speed by 0.1 | + |
Increase playback speed by 0.5 |
ArrowDown (↓) |
Decrease volume by 0.1 | ArrowLeft (←) |
Seek backward 10 seconds |
ArrowUp (↑) |
Increase volume by 0.1 | ArrowRight (→) |
Seek forward 10 seconds |
p |
Request Picture in Picture | j |
Seek backward 5 seconds |
P |
Exit Picture in Picture | Space / k |
Toggle play/pause |
, |
Previous frame | l |
Seek forward 5 seconds |
. |
Next frame | Home |
Seek to the beginning of the video |
0-9 |
Seek to a percentage of the video | End |
Seek to the end of the video |
Esc |
Close keyboard shortcuts | ? |
Toggle keyboard shortcuts |
f |
Toggle fullscreen | m |
Toggle mute |
We welcome contributions from everyone. Whether you're an experienced developer or just getting started, there's a place for you to contribute.
- Bug Fixes: Fork the repo, fix the issue, and open a PR with details.
- New Features: Open an issue to discuss the feature before implementing.
- Improve Documentation: Fix typos, add examples, or clarify usage.
- Testing: Add tests to ensure stability and prevent regressions.
- Code Reviews: Review PRs and help improve code quality.
Before you start, please read:
- Fork the repository:
git clone https://github.com/{yourusername}/M3U8-HLS-Player-with-Custom-Controls.git - Navigate to the project directory:
cd M3U8-HLS-Player-with-Custom-Controls - Install the dependencies:
npm install - Create a new branch:
git checkout -b your-branch-name - Make your changes.
- Commit your changes:
git commit -m "Your commit message" - Push your changes:
git push origin your-branch-name - Open a Pull Request.
- Chrome Web Store: https://chromewebstore.google.com/detail/gcefmpmkobjndjglciibnendclkahgma?utm_source=github-readme
- Edge Add-ons: https://microsoftedge.microsoft.com/addons/detail/m3u8hls-player-with-cust/bmlnobfgkikeejhbbdlhjinbmdcfgaef?utm_source=github-readme
- Firefox Add-ons: https://addons.mozilla.org/en-US/firefox/addon/m3u8-hls-player-with-shortcuts?utm_source=github_readme)utm_source=github-readme