DEV Community

Guillaume Sere
Guillaume Sere

Posted on • Edited on

🎬 I Built a Universal Video Player for HLS, DASH & MP4 (Now with Subtitles, Fullscreen & Quality Control)

#javascript #opensource #webdev #npm

Working with video on the web sounds simple…

Until you actually try it.

😩 The Problem

If you've ever built a video player, you know this:

  • MP4 works natively
  • HLS (.m3u8) needs special handling
  • DASH (.mpd) requires another library

And if you want to support:

  • 💻 Desktop
  • 📱 Mobile
  • 📺 Smart TVs

👉 it quickly becomes a mess.

🧠 So I Built My Own Solution

Yesterday, I created:

👉 universal-video-player

https://www.npmjs.com/package/universal-video-player

A lightweight JavaScript/TypeScript video player that supports:

  • MP4
  • HLS
  • DASH

All with one simple API.

⚡ The Goal

Instead of juggling multiple libraries…

You just do this:

import { VideoPlayer } from "universal-video-player"

 const player = new VideoPlayer({
 src: "video.m3u8",
 autoplay: true
 })

 player.mount("#app")
Enter fullscreen mode Exit fullscreen mode

💥 That’s it.

🎥 Multi-Format Support

⚡ Simple Usage 

const player = new VideoPlayer({
 src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
 autoplay: true 
})

 player.mount("#app")
Enter fullscreen mode Exit fullscreen mode

🚀 New Features Added

I’ve now added several advanced features to make the player production-ready:

✅ WebVTT subtitles support
✅ Fullscreen API
✅ Events system (play, pause, etc.)
✅ Custom controls support
✅ HLS quality selector

🎥 HLS Streaming Example 

const player = new VideoPlayer({
 src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
 autoplay: true
 })

 player.mount("#app")
Enter fullscreen mode Exit fullscreen mode

📝 Subtitles Example 

player.addSubtitles("subtitles.vtt", "en")
Enter fullscreen mode Exit fullscreen mode

📺 Fullscreen Example 

player.fullscreen()
Enter fullscreen mode Exit fullscreen mode

🎮 Events API 

player.on("play", () => {
 console.log("Video started") 
})
Enter fullscreen mode Exit fullscreen mode

⚡ Quality Selector (HLS) 

player.setQuality(0)
Enter fullscreen mode Exit fullscreen mode

📺 Smart TV Compatible

One of the main goals was compatibility.

👉 This player works on:

  • Samsung Tizen (browser)
  • LG WebOS
  • Android TV

As long as a browser is available.

🧠 How It Works

Internally, the player automatically detects the format:

  • .mp4 → native HTML5 video
  • .m3u8 → HLS via hls.js
  • .mpd → DASH via dash.js

👉 You don’t have to care about it.

🚀 Why This Matters

If you're building:

  • streaming apps
  • dashboards
  • media platforms
  • IPTV tools

👉 this saves a huge amount of development time.

No more:

  • switching libraries
  • rewriting code
  • handling edge cases manually

🎯 Current API 

player.play()
player.pause() 
player.destroy()
player.fullscreen()
player.addSubtitles()
player.setQuality()
player.on()
Enter fullscreen mode Exit fullscreen mode

🔥 Next Features

Planned next:

  • Chromecast support
  • AirPlay support
  • Netflix-style UI
  • Picture-in-picture
  • React/Vue wrappers

📦 Try It

npm install universal-video-player

💬 Final Thoughts

GIT: https://github.com/GuillaumeSere/universal-video-player
npm: https://www.npmjs.com/package/universal-video-player

Video on the web shouldn't be this complicated.

This is my attempt to make it simple.

If you try it, I’d love your feedback 🙌

Top comments (0)