Introduction : What the F is this?
If you're getting into OTT (Over-The-Top) streaming development (whether for Smart TVs, web platforms, streaming startups or whatever crazy project you are working on), understanding video players is a must.
This article explains, in a beginner-friendly way:
✔ What a video player actually does
✔ The difference between HLS and MPEG-DASH, as well as what DRM is
✔ List of (IMO) the best and most used open source OTT video players
What Exactly Is a Web Video Player?
A web video player is the part of a streaming app that:
- Displays the video (of course 🤦)
- Controls playback (play/pause/seek)
- Loads segments over the internet
- Manages adaptive streaming (quality changes)
- Handles DRM (if required; More on this in a future article)
Under the hood, a player works on top of HTMLVideoElement, and may rely on:
MSE (Media Source Extensions) → lets the player feed video chunks to the browser
EME (Encrypted Media Extensions) → required for DRM
Streaming Formats You MUST Know in OTT
Most OTT services rely on Adaptive Bitrate Streaming so video quality adjusts to network conditions.
| Format | Description | Used By |
|---|---|---|
| HLS (.m3u8) | Adaptive streaming from Apple, extremely common on Web & TV | Apple TV, iOS, Safari, many web players |
| MPEG-DASH (.mpd) | Open standard adaptive streaming | Android TV, Tizen, WebOS, set-top boxes |
Quick Tip: Most professional OTT apps support both formats.
The Essential Open Source Players for OTT
Personal list, order not relevant
1 - Video.js
Best for: Getting started, building full featured web streaming UIs
Supports: HLS, DASH (via plugins), subtitles, ads, analytics
Why it’s great: Easy to learn, huge plugin ecosystem
- Great for beginners
- Used by many streaming platforms
- Fully customizable UI
👉 Recommended for beginner OTT developers.
2 - HLS.js
Best for: Web apps streaming (HLS only).
Supports: HLS via MSE for Chrome/Firefox (Safari supports it natively)
Browser support quick tip:
Safari plays HLS natively — Chrome/Firefox do not.
HLS.js fixes that.
- Lightweight
- Can be used standalone or inside Video.js
- Ideal for live streaming and VOD when only HLS is required
👉 Recommended for HLS format handling and Apple developers.
3 - Shaka Player (Google)
Best for: Production OTT apps, DRM, multi-CDN environments
Supports: HLS, DASH, Widevine/PlayReady/FairPlay DRM
Why it’s pro: Extremely reliable ABR (adaptive bitrate logic)
Used in enterprise streaming. Excellent for serious OTT engineering (and not so serious OTT engineers 😈) .
- DRM support out of the box
- Powerful development APIs
- Great performance on Smart TV browsers
👉 Recommended for advanced OTT developers.
4 - Dash.js
Best for: Services that stream (MPEG-DASH only)
Supports: Adaptive DASH streaming (reference implementation)
- Maintained by the DASH Industry Forum
- Reliable ABR algorithms
- No built-in UI. You must create your own controls
👉 Learn if you work with DASH-only pipelines.
5 - RxPlayer (by CANAL+)
Best for: production grade, customizable DASH/HLS playback
Supports: HLS, DASH, DRM, low latency streaming, offline playback
- Designed for real OTT use cases
- Strong performance on Smart TVs
- Very robust streaming engine
👉 Recommended for advanced OTT developers.
Streaming Player Comparison (HLS / DASH / DRM)
| Player | HLS | DASH | DRM Support | Integration Complexity |
|---|---|---|---|---|
| Video.js | ⚠ via VHS/HLS.js/Shaka | ⚠ via contrib-dash/Shaka | ⚠ Depends on engine/plugin | Easy/Medium |
| HLS.js | ✔ Desktop: via JS, Safari: native | ❌ | ⚠ Widevine requires EME, FairPlay handled natively in Safari/iOS | Medium |
| Shaka Player | ✔ | ✔ | ✔ Widevine / PlayReady, ⚠ FairPlay only Safari/iOS | High |
| Dash.js | ⚠ CMAF-HLS only | ✔ | ⚠ Requires EME for DRM | Medium–High |
| RxPlayer | ✔ | ✔ | ✔ Widevine / PlayReady | High |
DASH not supported by HLS.js
FairPlay supported only in Safari/iOS natively
Which Player Should You Learn First? (And suffer in the process)
Getting started with OTT streaming can feel like a jungle 😅.
Here's a simple path I’d recommend:
Step 1 — Start with Video.js
Video.js is your playground for learning the basics. It lets you:
- Play HLS (
.m3u8) and DASH (.mpd) via plugins - Add subtitles (WebVTT)
- Control playback with JS APIs
- Customize your UI (buttons, progress bar, volume, etc.)
Quick tip: HLS works out-of-the-box on Safari/iOS. On Chrome/Firefox, Video.js uses HLS.js or VHS behind the scenes.
Step 2 — Dive into HLS.js
- Handles HLS on browsers that don’t support it natively
- Lets you play with adaptive streaming and MSE
- Can be used standalone or inside Video.js for more control
Step 3 — Level up with Shaka Player
- Plays HLS and DASH
- Supports DRM (Widevine/PlayReady, FairPlay on Safari/iOS)
- Smart TV ready
- Advanced ABR logic for smooth playback
If your goal is Smart TV or professional OTT apps, learning Shaka is essential in my opinion. It's like a "Swiss Army Knife" in the industry.
Quick tip: Don’t rush. Start with Video.js, understand HLS.js, then move to Shaka when you feel comfortable with playback, ABR, and DRM.
OTT Streaming Glossary used
| Concept | What It Means / Why It Matters |
|---|---|
| HLS (.m3u8) | Apple’s adaptive streaming format. Works natively on Safari/iOS, requires JS players elsewhere (HLS.js/Video.js). |
| MPEG-DASH (.mpd) | Open standard adaptive streaming. Supported widely on Android TV, Tizen, WebOS, and most modern browsers. |
| ABR (Adaptive Bitrate) | Adjusts video quality automatically based on network speed to avoid buffering. |
| DRM (Widevine, FairPlay, PlayReady) | Protects premium content; FairPlay works only natively on Safari/iOS. Widevine & PlayReady require EME integration. |
| CDN Delivery | Content Delivery Network. Distributes video globally to reduce latency and buffering. |
| Manifest / Playlist | File linking video chunks (.m3u8 for HLS, .mpd for DASH). Player reads this to stream content. |
| MSE (Media Source Extensions) | JS API that allows feeding video chunks to the browser for adaptive streaming. |
| EME (Encrypted Media Extensions) | JS API required for DRM playback in browsers (Widevine, PlayReady). |
| VOD (Video on Demand) | Pre-recorded streaming content that users can watch anytime. |
| Live Streaming | Real-time streaming of events; requires low-latency and ABR handling. |
| Segment / Chunk | Small piece of video streamed separately to allow adaptive bitrate and smooth playback. |
| Low-Latency Streaming | Reduces delay between broadcaster and viewer, important for sports, auctions, or interactive content. |
| Player Engine / Framework | The underlying JS library or player (Video.js, Shaka, HLS.js) that handles playback, ABR, DRM, and UI. |
| Plugins / Extensions | Add-ons for Video.js or other players to support DASH, subtitles, analytics, ads, etc. |
If this helped you, consider sharing it with other devs starting in OTT 🚀
💬 Suggestions, fixes, or improvements are always welcome in the comments!
Made with ❤️ for the streaming developer community by Braggio - GitHub
Top comments (0)