DEV Community

Asadbek Karimov
Asadbek Karimov

Posted on

One Player to Rule Them All (MP4, HLS, Dash, YouTube, Vimeo)

#opensource #webdev #react #frontend

DEMO

So, full disclosure: I’m kind of moving on to other things in life right now.

But while I was cleaning up some old folders, I found this player I wrote for a project a while back. I remember being super frustrated at the time because I needed a way to play everything HLS, Dash, MP4, YouTube, Vimeo without having to glue together three different libraries or write a bunch of conditional logic just to get a video on the screen.

I figured rather than letting the code rot on my hard drive, I’d package it up and share it. Maybe it saves you a headache or two.

It’s called react-all-player. It’s not trying to change the world, it just plays video files.

The "Why" (The Story)

Back when I was working on this specific project, we had media coming from everywhere. Some of it was static MP4s, some of it was HLS streams, and marketing insisted on embedding YouTube links.

I looked around for a solution that handled all of them with a single, consistent API, and I couldn't really find one that felt lightweight enough. So, I built this.

It’s designed to be simple. You throw a URL at it, and it figures out how to play it.

What it actually does

I tried to make it as "plug and play" as possible. Here are the features I managed to cram in:

  • Plays Everything: HTML Video/Audio, YouTube, Vimeo.
  • Streaming Ready: Built-in support for hls.js and dash.js.
  • Auto-detection: You paste a YouTube link, it knows it's YouTube. You paste a Vimeo link, it knows.
  • Accessibility: Full support for VTT captions and screen readers (this was a big requirement for me).
  • Customizable: You can rip out the controls and put your own in if you want.

How to use it 

pnpm install react-all-player
Enter fullscreen mode Exit fullscreen mode

Here is the most basic example. You can see I added support for quality switching and subtitles because, well, real apps usually need that.

import ReactAllPlayer from 'react-all-player';

<ReactAllPlayer
  sources={[
    {
      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
      label: '1080p',
    },
    {
      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
      label: '720p',
    },
  ]}
  poster="https://path-to-your-poster.jpg"
/>
Enter fullscreen mode Exit fullscreen mode

The YouTube/Vimeo Headache (Solved)

I hated dealing with the YouTube API iframe mess. With this, you just drop the link in.

// It auto-detects the type from the URL
<ReactAllPlayer
  sources={[
    {
      file: 'https://www.youtube.com/watch?v=bTqVqk7FSmY'
    }
  ]}
/>
Enter fullscreen mode Exit fullscreen mode

It unifies the events, too. So onPause works the same way whether it's a raw MP4 or a YouTube embed.

For the Next.js folks

I know SSR breaks everything regarding window objects, so if you use Next.js, just lazy load it:

import dynamic from "next/dynamic";

const ReactAllPlayer = dynamic(() => import('react-all-player'), {
  ssr: false,
});
Enter fullscreen mode Exit fullscreen mode

Wrapping up

Look, it’s open source. It’s got speed controls, picture-in-picture, keyboard shortcuts all the stuff you’d expect.

I’m sharing this because I think it’s a decent tool and it works well for the HLS/Dash/MP4 trifecta. If you find a bug, feel free to fork it or submit a PR, though as I said, I'm moving onto other things so I might not be super active immediately.

If this makes your dev process easier, then I’m happy.

Link to Repo
NPM

Top comments (0)