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(react): use SimpleVideo as default Video and rename HLS version to HlsVideo (#171)

Browse Source
This commit is contained in:
Christian Pillsbury
2025-11-06 10:34:04 -08:00
committed by GitHub
parent 642d651881
commit 1878a271ba
20 changed files with 177 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/concepts/architecture.mdx
+1 -1
View File
@@ -62,7 +62,7 @@ Want to dive deeper? <DocsLink slug="concepts/ui-components">Explore UI componen
Media renderers are the components that actually display your media. They're essentially "players with no UI". They handle the video/audio rendering and expose a consistent API.
<FrameworkCase frameworks={["react"]}>
For now, we're starting with just a `<Video />` component, but we're looking forward to adding more in the future. From engines like HLS and DASH, to services like YouTube and Vimeo.
For now, we'll have a default `<Video />` component, which supports MP4 and other natively-supported streams and `<HlsVideo />`, which supports HLS. In the future, we'll be adding additional support for streaming standards like DASH and services like YouTube and Vimeo.
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
For now, we're starting with just the native HTML5 `<video />` component, but we're looking forward to adding more in the future. From engines like HLS and DASH, to services like YouTube and Vimeo.
site/src/content/docs/how-to/installation.mdx
+5 -5
View File
@@ -66,7 +66,7 @@ import '@videojs/html/skins/minimal';
## 3. Pick Your Renderer
<FrameworkCase frameworks={["react"]}>
Media renderers display your video and audio content. For now, Video.js v10 includes `<Video />`, which supports HLS streams.
Media renderers display your video and audio content. For now, Video.js v10 includes `<Video />`, which supports MP4 and other natively-supported streams and `<HlsVideo />`, which supports HLS.
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
Media renderers display your video and audio content. For now, you should use the native HTML5 `<video>` element.
@@ -86,8 +86,8 @@ export default function App() {
<VideoProvider>
<FrostedSkin>
<Video
src="https://stream.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA.m3u8"
poster="https://image.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA/thumbnail.webp"
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
poster="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.webp"
playsInline
/>
</FrostedSkin>
@@ -105,8 +105,8 @@ document.body.innerHTML = `
<media-skin-frosted>
<video
slot="media"
src="https://stream.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA.m3u8"
poster="https://image.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA/thumbnail.webp"
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
poster="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.webp"
playsinline
></video>
</media-skin-frosted>