I'm excited to share React TV Player - a free to use open source React media player component designed for TV, aiming to lower the barrier to entry and simplify playback in big-screen web apps! 🙌

With a customizable UI and easy arrow-key navigation, it can play a variety of urls like Dash/HLS streams and it even supports YouTube, Twitch & Vimeo videos - saving the cost and hassle of additional media encoding 🎉

Live demo (for desktop browsers)

Github repo (full readme info and source code)

Installation

It has been built as an npm package for easy install:

npm install react-tv-player

Usage

Then just import the player and render it in your App/Page

import React from "react";
import { TVPlayer } from "react-tv-player";
function App() {
  return (
    <>
      <TVPlayer url="https://www.youtube.com/watch?v=SkVqJ1SGeL0" />
    </>
  );
}

The demo's source code App.tsx illustrates how the component can be initialised with more props such as metadata, custom buttons, preview images and multiple media...

<TVPlayer
  title={mediaList[mediaIndex].title}
  subTitle={mediaList[mediaIndex].subTitle}
  url={mediaList[mediaIndex].url}
  light={mediaList[mediaIndex].preview}
  customButtons={customButtons}
  mediaCount={mediaList.length}
  onLikePress={handleLike}
/>

The Github readme details the props available plus the more advanced methods and hooks available to you.

Why Another Player?

In the dynamic landscape of the OTT TV industry, I've dedicated years working with various players. During this journey, two persistent challenges surfaced time and again: performant UI and compatible media encodings. These hurdles often forced us to heavily customise players and tackle streaming difficulties, leading to added costs and frustrating delays. 😫

Enter ReactTVPlayer, an open-source component that seamlessly integrates with your React applications...

What Sets It Apart?

It's designed for TV experiences out of the box, complete with customisable UI buttons and intuitive arrow key plus cursor navigation. 🎮 In addition to handling HLS and Dash streams effortlessly, it tackles the formidable challenge of playing YouTube and Vimeo urls directly on TV. Supporting YouTube/Vimeo eliminates the need for custom media encoding when it's not always necessary or even affordable. 🎉

How Does It Work?

Under the hood, this component harnesses the power of open-source libraries like Norigin Media's spatial navigation hook. It builds upon the excellence of React Player, which utilises hls.js and dash.js. Powered by React TypeScript (although you don't need to use TypeScript to make the most of it), this library is packaged efficiently using Vite, making integration a breeze. 💪

From Amazon FireTV sticks and Samsung Tizen Smart TVs to Xbox, LG webOS and even desktop-based web apps, ReactTVPlayer aims to cover a vast landscape of devices, especially those post-2018 with modern Chromium browsers. 📺 🖥️ 💻

I hope this post has given you a good intro to the component and how it can help simplify and enhance the playback experiences in your next big-screen web apps! 🙌

Live demo (for desktop browsers)

Github repo (full readme info and source code)