---
title: HlsJsVideo
frameworkTitle:
  html: hlsjs-video
description: HLS video element powered by hls.js for adaptive bitrate streaming
---

import MediaReference from "@/components/docs/api-reference/MediaReference.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import Demo from "@/components/docs/demos/Demo.astro";

{/* React demos */}
import BasicUsageDemoReact from "@/components/docs/demos/hlsjs-video/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/hlsjs-video/react/css/BasicUsage.css?raw";

{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.ts?raw";

HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming. It's the recommended choice for HLS playback: full feature support across every browser. For alternatives, see [NativeHlsVideo](/docs/framework/html/reference/native-hls-video/) (browser-native HLS) or [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/) (lightweight HLS).

## Examples

### Basic Usage

<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
      { title: "App.css", code: basicUsageReactCss, lang: "css" },
    ]}>
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "index.html", code: basicUsageHtml, lang: "html" },
      { title: "index.css", code: basicUsageHtmlCss, lang: "css" },
      { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
    ]}>
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
</FrameworkCase>

<MediaReference media="HlsJsVideo" />
