HLS Video Player

Component 18

About

A headless HLS video player with native HLS detection, adaptive resolution control, and error handling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HLS Video Player to your project and fits it to your theme.

Code

How HLS Video Player is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { HLSVideoPlayer } from '@/components/ui/hls-video-player'

function HLSVideoPlayerDemo() {
  return (
    <div className="px-4 py-6">
      <HLSVideoPlayer
        src="https://stream.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU.m3u8"
        width={1920}
        height={1080}
        muted
        autoPlay
        playsInline
        className="mx-auto w-full max-w-2xl overflow-hidden rounded-lg"
      />
    </div>
  )
}

export default HLSVideoPlayerDemo