Build a custom HLS player in React with hls.js (no wrapper libraries)

Mason K Posted on May 31 Build a custom HLS player in React with hls.js (no wrapper libraries) # javascript # webdev # video # react TL;DR We'll build a custom HLS player on top of hls.js 1.6.x and React 19 with no wrapper library. Play/pause, seek, volume, quality readout, buffer state, and proper error recovery. End result is ~150 lines and bends to whatever UI you want. 📦 Code: github.com/USER/react-hls-player-demo (replace before publishing) This is the "stop installing video.js for the third time" tutorial. The wrapper libraries are doing two things you need (the MSE shim and the error-recovery loop) and a lot of things you don't (a giant control bar, a plugin model, a CSS skin). The MSE shim is hls.js . The error-recovery loop is fifteen lines. Everything else can be your own React. 0. Versions node 22.x react 19.x hls.js 1.6.16 # latest stable as of 2026-04-13 Enter fullscreen mode Exit fullscreen mode The 1.7 alpha is interesting (interstitial-ads improvements landed in canary on 2026-05-16) but not yet ready for production. Stick with 1.6 unless you're testing the next major. 1. Setup npm create vite@latest react-hls-player-demo -- --template react-ts cd react-hls-player-demo npm install npm install hls.js Enter fullscreen mode Exit fullscreen mode For test streams, the Apple HLS test page has a few public manifests. The bipbop ad-stitched stream is the classic one: https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8 Enter fullscreen mode Exit fullscreen mode 2. The bare minimum: a hook that mounts hls.js // src/useHls.ts import { useEffect , useRef } from " react " ; import Hls from " hls.js " ; export function useHls ( src : string ) { const videoRef = useRef < HTMLVideoElement > ( null ); useEffect (() => { const video = videoRef . current ; if ( ! video ) return ; // Safari (and iOS) plays HLS natively. Hand the URL to the browser. if ( video . canPlayType ( " application/vnd.apple.mpegurl " ))