zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): API reference pages for media elements (#1342)

Browse Source
This commit is contained in:
Darius Cepulis
2026-06-19 09:44:54 -07:00
committed by GitHub
parent 1512729365
commit d799be1063
95 changed files with 3219 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/reference/dash-video.mdx
+61
View File
@@ -0,0 +1,61 @@
---
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";
{/* 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";
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>
</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="DashVideo" />