diff --git a/apps/docs/content/components/VideoPlayer.mdx b/apps/docs/content/components/VideoPlayer.mdx index 4cdc08ea8..986a9fa24 100644 --- a/apps/docs/content/components/VideoPlayer.mdx +++ b/apps/docs/content/components/VideoPlayer.mdx @@ -6,6 +6,7 @@ description: Use the video player component to enable playback of self-hosted vi --- import {Label} from '@primer/react' +import {Link, Stack, VideoPlayer} from '@primer/react-brand' ```js import {VideoPlayer} from '@primer/react-brand' @@ -22,6 +23,27 @@ import {VideoPlayer} from '@primer/react-brand' ``` +## With Audio Description + +Videos with important visual information must include an audio description to ensure that the content is accessible to all users. + +The audio description can be provided as part of the existing soundtrack, or via a link to an alternate audio-described version. + +```jsx live + + + + + + + + Watch with audio description + + + + +``` + ## With poster ```jsx live @@ -106,7 +128,7 @@ import {VideoPlayer} from '@primer/react-brand' ```jsx live } + playIcon={() => } > { - const MyVideoPlayer = () => { - const {isPlaying, togglePlaying, seek} = useVideo() - - return ( - - - - - - - - - - - - ) - } +```javascript live noinline +const CustomVideoPlayer = () => { + const {isPlaying, togglePlaying, seek} = useVideo() return ( - - - + + + + + + + + + + + ) } + +const App = () => ( + + + +) + +render() ``` ## useVideo Context