Video player
Use the video player component to enable playback of self-hosted videos
import {VideoPlayer} from '@primer/react-brand'
VideoPlayer provides a React alternative to the native HTML <video />.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | true | Sets the title of the video | |
children | React.ReactNode, React.ReactNode[] | true | Takes <source> and <track> elements to present video information | |
poster | string | false | Sets an image as the starting frame for the video element | |
branding | boolean | false | Displays GitHub branding next to video title | |
className | string | false | Sets a custom class |
The component API supports all standard HTML attribute props, while providing some additional behavior as described above.
VideoPlayer.Source provides a React alternative to the native HTML <source />.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
src | string | true | Sets the URL of the video content | |
type | string | false | Sets media type for the video content |
The component API supports all standard HTML attribute props, while providing some additional behavior as described above.
VideoPlayer.Track provides a React alternative to the native HTML <track />.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
src | string | true | Sets the source of the VTT file containing captions | |
kind | 'subtitles', 'captions', 'descriptions', 'chapters', 'metadata' | false | Sets how the text track is meant to be used | |
srcLang | string | false | Language of the text data. It must be a valid BCP 47 language tag. | |
label | string | false | A user-readable title of the text track which is used by the browser when listing available text tracks. | |
default | boolean | false | This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. |
The component API supports all standard HTML attribute props, while providing some additional behavior as described above.