mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(site): API reference pages for media elements (#1342)
This commit is contained in:
Darius Cepulis
@@ -0,0 +1,112 @@
|
||||
---
|
||||
title: BackgroundVideo
|
||||
frameworkTitle:
|
||||
html: background-video
|
||||
description: Decorative background video element with automatic muting and looping
|
||||
---
|
||||
|
||||
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
||||
import StyleCase from "@/components/docs/StyleCase.astro";
|
||||
import Demo from "@/components/docs/demos/Demo.astro";
|
||||
import MarkdownCode from "@/components/typography/MarkdownCode.astro";
|
||||
import Table from "@/components/typography/Table.astro";
|
||||
import Tbody from "@/components/typography/Tbody.astro";
|
||||
import Td from "@/components/typography/Td.astro";
|
||||
import Th from "@/components/typography/Th.astro";
|
||||
import Thead from "@/components/typography/Thead.astro";
|
||||
import Tr from "@/components/typography/Tr.astro";
|
||||
|
||||
{/* React demos */}
|
||||
import BasicUsageDemoReact from "@/components/docs/demos/background-video/react/css/BasicUsage";
|
||||
import basicUsageReactTsx from "@/components/docs/demos/background-video/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/background-video/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/background-video/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/background-video/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/background-video/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/background-video/html/css/BasicUsage.ts?raw";
|
||||
|
||||
Decorative background video. By default it's muted, looped, and autoplaying — use the opt-out attributes below to change that. Renders a `<video>` inside a shadow DOM, positioned to fill its container.
|
||||
|
||||
## 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>
|
||||
|
||||
## API Reference
|
||||
|
||||
### Attributes
|
||||
|
||||
<Table outerClass="my-6">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Attribute</Th>
|
||||
<Th>Description</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
<Tr>
|
||||
<Td><MarkdownCode>src</MarkdownCode></Td>
|
||||
<Td>URL of the video source.</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td><MarkdownCode>nomuted</MarkdownCode></Td>
|
||||
<Td>Opt out of muted playback. By default the video is muted.</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td><MarkdownCode>noloop</MarkdownCode></Td>
|
||||
<Td>Opt out of looped playback. By default the video loops.</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td><MarkdownCode>noautoplay</MarkdownCode></Td>
|
||||
<Td>Opt out of autoplay. By default the video autoplays.</Td>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
|
||||
### CSS Custom Properties
|
||||
|
||||
<Table outerClass="my-6">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Variable</Th>
|
||||
<Th>Default</Th>
|
||||
<Th>Description</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
<Tr>
|
||||
<Td><MarkdownCode>--media-object-fit</MarkdownCode></Td>
|
||||
<Td><MarkdownCode>inherit</MarkdownCode></Td>
|
||||
<Td>Controls how the video fits its container.</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td><MarkdownCode>--media-object-position</MarkdownCode></Td>
|
||||
<Td><MarkdownCode>50% 50%</MarkdownCode></Td>
|
||||
<Td>Controls the position of the video within its container.</Td>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
@@ -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" />
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: HlsVideo
|
||||
frameworkTitle:
|
||||
html: hls-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 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/hls-video/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/hls-video/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/hls-video/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/hls-video/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/hls-video/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/hls-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
|
||||
|
||||
{/* 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="HlsVideo" />
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: MuxAudio
|
||||
frameworkTitle:
|
||||
html: mux-audio
|
||||
description: Audio element for Mux-hosted HLS streams
|
||||
---
|
||||
|
||||
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/mux-audio/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/mux-audio/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/mux-audio/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/mux-audio/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/mux-audio/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/mux-audio/html/css/BasicUsage.ts?raw";
|
||||
|
||||
Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.
|
||||
|
||||
## 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="MuxAudio" />
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: MuxVideo
|
||||
frameworkTitle:
|
||||
html: mux-video
|
||||
description: Video element for Mux-hosted HLS streams
|
||||
---
|
||||
|
||||
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/mux-video/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/mux-video/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/mux-video/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/mux-video/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/mux-video/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/mux-video/html/css/BasicUsage.ts?raw";
|
||||
|
||||
Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.
|
||||
|
||||
## 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="MuxVideo" />
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: NativeHlsVideo
|
||||
frameworkTitle:
|
||||
html: native-hls-video
|
||||
description: HLS video element using the browser's built-in HLS support
|
||||
---
|
||||
|
||||
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/native-hls-video/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/native-hls-video/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.ts?raw";
|
||||
|
||||
HLS video element that relies on the browser's native HLS support. Works on Safari and other browsers with built-in HLS playback. For cross-browser HLS support, use [HlsVideo](/docs/framework/html/reference/hls-video/) instead.
|
||||
|
||||
## 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="NativeHlsVideo" />
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: SimpleHlsAudioOnly
|
||||
frameworkTitle:
|
||||
html: simple-hls-audio-only
|
||||
description: Audio-only HLS element that plays the audio rendition of an HLS stream
|
||||
---
|
||||
|
||||
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/simple-hls-audio-only/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.ts?raw";
|
||||
|
||||
Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/).
|
||||
|
||||
## 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="SimpleHlsAudioOnly" />
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: SimpleHlsVideo
|
||||
frameworkTitle:
|
||||
html: simple-hls-video
|
||||
description: Lightweight HLS video element with minimal bundle size
|
||||
---
|
||||
|
||||
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/simple-hls-video/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/simple-hls-video/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlCss from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.css?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.ts?raw";
|
||||
|
||||
Lightweight HLS video element optimized for minimal bundle size. For full hls.js feature support, use [HlsVideo](/docs/framework/html/reference/hls-video/) instead.
|
||||
|
||||
## 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="SimpleHlsVideo" />
|
||||
Reference in New Issue
Block a user