---
title: DashVideo
frameworkTitle:
  html: dash-video
description: DASH video element powered by dash.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 live demo disabled until #1343 (SSR-breaking media imports) is fixed; show source instead. */}
import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs";
import ServerCode from "@/components/Code/ServerCode.astro";
import basicUsageReactTsx from "@/components/docs/demos/dash-video/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/dash-video/react/css/BasicUsage.css?raw";
import basicUsageReactTailwindTsx from "@/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx?raw";

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

DASH video element powered by [dash.js](https://github.com/Dash-Industry-Forum/dash.js/) for MPEG-DASH adaptive bitrate streaming.

## Examples

### Basic Usage

{/* React: source-only until #1343 is fixed. Restore <Demo> with <BasicUsageDemoReact client:idle /> afterward. */}
<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <TabsRoot client:idle>
      <TabsList client:idle label="Basic usage source code">
        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
        <Tab client:idle value="App.css">App.css</Tab>
      </TabsList>
      <TabsPanel client:idle value="App.tsx" initial>
        <ServerCode code={basicUsageReactTsx} lang="tsx" />
      </TabsPanel>
      <TabsPanel client:idle value="App.css">
        <ServerCode code={basicUsageReactCss} lang="css" />
      </TabsPanel>
    </TabsRoot>
  </StyleCase>
  <StyleCase styles={["tailwind"]}>
    <TabsRoot client:idle>
      <TabsList client:idle label="Basic usage source code">
        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
      </TabsList>
      <TabsPanel client:idle value="App.tsx" initial>
        <ServerCode code={basicUsageReactTailwindTsx} lang="tsx" />
      </TabsPanel>
    </TabsRoot>
  </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>
  <StyleCase styles={["tailwind"]}>
    <Demo files={[
      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
    ]}>
      <BasicUsageDemoHtmlTailwind />
    </Demo>
  </StyleCase>
</FrameworkCase>

<MediaReference media="DashVideo" />