DEV Community

Guillaume Sere
Guillaume Sere

Posted on

🎬 I Built a Universal Video Player That Supports HLS, DASH & MP4 (Works on Smart TVs)

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

⚡ Streaming Example (HLS)

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

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

📺 Works on Smart TVs

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

👉 this saves a lot of time.

No more:

  • switching libraries
  • rewriting code
  • handling edge cases manually

🎮 Simple API

player.play() 
player.pause()
player.destroy()
Enter fullscreen mode Exit fullscreen mode

🔥 What’s Next

This is just the beginning.

Planned features:

  • fullscreen support
  • custom UI controls
  • events (onPlay, onPause)
  • quality selector

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