M3U8/HLS/DASH Player with Custom Controls

Advanced M3U8/HLS/DASH player with customizable controls. Supports keyboard shortcuts, Picture-in-Picture (PiP), frame navigation, and live streams.

📦 Store Downloads

✨ Features

• Customizable controls
• Keyboard shortcuts
• Picture in Picture (PiP) mode
• Frame navigation
• Support for live streams
• Chromium DASH Widevine license URL support

🔐 DASH DRM (Chromium)

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 SWSECUREDECODE)

• Last entered DRM values are auto-populated on next prompt
• You can remember DRM values per stream host

• Authorization = Bearer <token>
• X-Custom-Auth = <value>

🔧 Installation

From Store (Recommended)

• 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

From Source

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

Load Unpacked / Temporary Add-on

• 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 → select manifest.json

🧑‍💻 Development

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

⌨️ Keyboard Shortcuts

| 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 |

🤝 Contributing

We welcome contributions from everyone. Whether you're an experienced developer or just getting started, there's a place for you to contribute.

Ways 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.

• Contributing Guide
• Code of Conduct

Getting Started

• Fork the repository:

• Navigate to the project directory:

• Install the dependencies:

• Create a new branch:

• Make your changes.
• Commit your changes:

• Push your changes:

• Open a Pull Request.

🔗 Links

• 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?utmsource=githubreadme)utm_source=github-readme