Skip to content

Commit

Permalink
add audio description example to VideoPlayer docs
Browse files Browse the repository at this point in the history
  • Loading branch information
joshfarrant committed Jan 8, 2025
1 parent b96ffa5 commit 8055324
Showing 1 changed file with 18 additions and 1 deletion.
19 changes: 18 additions & 1 deletion apps/docs/content/components/VideoPlayer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -22,6 +23,22 @@ import {VideoPlayer} from '@primer/react-brand'
</VideoPlayer>
```

## 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
<Stack gap="normal">
<VideoPlayer title="GitHub media player">
<VideoPlayer.Source src="/brand/assets/example.mp4" />
<VideoPlayer.Track src="/brand/assets/example.vtt" default />
</VideoPlayer>
<Link href="#">Watch with audio description</Link>
</Stack>
```

## With poster

```jsx live
Expand Down Expand Up @@ -111,7 +128,7 @@ The `VideoPlayer` component exposes a `useVideo` hook that can be used to contro
Full documentation for the `useVideo` hook can be found [below](#usevideo-context).

```tsx live
() => {
;() => {
const MyVideoPlayer = () => {
const {isPlaying, togglePlaying, seek} = useVideo()

Expand Down

0 comments on commit 8055324

Please sign in to comment.