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

fix(site): update use-media reference for mediahost architecture (#1702)

Browse Source 
Co-authored-by: Darius Cepulis <dcepulis@mux.com>
This commit is contained in:
Wesley Luyten
2026-06-18 11:14:45 -07:00
committed by GitHub
co-authored by Darius Cepulis
parent 964d9ca1d7
commit 9bcdf5ffc2
4 changed files with 114 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/reference/use-media.mdx
+25 -2
View File
@@ -1,11 +1,34 @@
---
title: Player.useMedia
description: Hook to access the underlying media element from within a Player.Provider
description: Hook to access the media object from within a Player.Provider
---
import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import Demo from "@/components/docs/demos/Demo.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import BasicUsageDemoReact from "@/components/docs/demos/use-media/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/use-media/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/use-media/react/css/BasicUsage.css?raw";
`Player.useMedia` returns the current `HTMLMediaElement` (or `null` if no media element has been registered yet). Use it to interact directly with the native media element when needed. It must be called within a `Player.Provider`. The media element becomes available after a `<Video>` or `<Audio>` component mounts inside the provider tree. Also available as a standalone import (`import { useMedia } from '@videojs/react'`) — identical behavior, no typing difference. To attach a custom media element instead of the built-in components, see <DocsLink slug="reference/use-media-attach">`useMediaAttach`</DocsLink>.
`Player.useMedia` (from <DocsLink slug="reference/create-player">`createPlayer`</DocsLink>) returns the current `Media` object (or `null` if no media has been registered yet). `Media` is a runtime-agnostic playback interface — any instance that conforms to it, including an `HTMLVideoElement`, can be the media. It exposes capabilities like `play()` and event subscription rather than assuming a native element. It must be called within a `Player.Provider`. The media object becomes available after a `<Video>` or `<Audio>` component mounts inside the provider tree. To attach a custom media element instead of the built-in components, see <DocsLink slug="reference/use-media-attach">`useMediaAttach`</DocsLink>.
## 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>
<UtilReference util="useMedia" />