Like an Image, a Video component is used for media layout. This component is
supercharged with lots of goodies to turn a regular video in a full blown viewing experience.

Props

Component props
Name
Type
Default
string
-

Accessibility label for the fullscreen maximize button if controls are shown

string
-

Accessibility label for the fullscreen minimize button if controls are shown

string
-

Accessibility label for the mute button if controls are shown

string
-

Accessibility label for the pause button if controls are shown

string
-

Accessibility label for the play button if controls are shown

string
-

Accessibility label for the unmute button if controls are shown

Required
number
-

Proportional relationship between width and height of the video, calculated as width / height.

Required
string
-

The URL of the captions track for the video (.vtt file)

Required
number
1

Specifies the speed at which the video plays: 1 for normal

Required
boolean
false

Specifies whether the video should play or not

preload
Required
"auto" | "metadata" | "none"
"auto"

Specifies how, if any, the video should be loaded when the page loads

Required
string | Array<{| type: "video/m3u8" | "video/mp4" | "video/ogg, src: string |}>
-

The URL of the video file to play. This can also be supplied as a list of video types to respective
video source urls in fallback order for support on various browsers.

Required
number
0

Specifies the volume of the video audio: 0 for muted, 1 for max

backgroundColor
"black" | "transparent"
"black"

Background color used to fill the video's placeholder

children
React.Node
-

This children prop is not same as children inside the native html video element.
Instead it serves to add overlays on top of the html video element, while still being under the video controls.

boolean
-

Show the video player controls

crossOrigin
"use-credentials" | "anonymous"
-

Designate CORS behavior for the video element. When not passed in, CORS checks are disabled.

disableRemotePlayback
boolean
false

Disable remote playback. See MDN Web Docs: disableRemotePlayback for more info.

boolean
-

The video will start playing over again when finished

objectFit
"fill" | "contain" | "cover" | "none" | "scale-down"
-

Sets how the content of the replaced <video> element should be resized to fit its container

onDurationChange
({ event: SyntheticEvent<HTMLVideoElement>, duration: number }) => void
-

Sent when the metadata has loaded or changed, indicating a change in duration

onEnded
({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when playback of the video completes

onError
({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when an error occurs

onFullscreenChange
({ event: Event, fullscreen: boolean }) => void
-

Sent when the video full screen status changes

onLoadedChange
({ event: SyntheticEvent<HTMLVideoElement>, loaded: number }) => void
-

Sent when progress happens on downloading the media

onLoadStart
({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when the media has started to load

({ event: SyntheticEvent<HTMLDivElement> }) => void
-

Sent when playback is paused

({ event: SyntheticEvent<HTMLDivElement> }) => void
-

Sent when playback of the media starts after having been paused

onPlayheadDown
({ event: SyntheticMouseEvent<HTMLDivElement> }) => void
-

Sent when mouse down event occurs on playhead

onPlayheadUp
({ event: SyntheticMouseEvent<HTMLDivElement> }) => void
-

Sent when mouse up event occurs on playhead

({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when playback of the media is ready to start after having been paused

onReady
({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when video is loaded and ready to play.

onSeek
({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when a seek operation completes from the playhead

onSeeking
({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when a seek operation begins

onStalled
({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when trying to fetch data but the data is unexpectedly not forthcoming

onTimeChange
({ event: SyntheticEvent<HTMLVideoElement>, time: number }) => void
-

Sent when the time indicated by the element's currentTime attribute has changed

({ event: SyntheticEvent<HTMLDivElement>, volume: number }) => void
-

Sent when the audio volume changes

({ event: SyntheticEvent<HTMLVideoElement> }) => void
-

Sent when playback has stopped because of a temporary lack of data

playsInline
boolean
-

Serves as a hint to the user agent that the video should to be displayed "inline" in
the document by default, constrained to the element's playback area, instead of being displayed
fullscreen or in an independent resizable window. This attribute is mainly relevant to
iOS Safari browsers

string
-

The image to show while the video is downloading

Video media basics

The source url you pass into Video will be used to download and play the video file. While it is
downloading the metadata, you may show a thumbnail image by using the poster prop.

Video multiple sources

Not all browsers support the same video encoding types. If you have multiple video file sources, you can pass
them as a list to Video in the order you want the HTML video tag to use as fallbacks.

Native video attributes

Video supports the native HTML video attributes such as autoPlay, loop, muted, and more.
Simply pass these through as props on the Video component.

Video controls

Video components can show a control bar to users in order to allow them access to certain features
such as play/pause, timestamps, mute, and fullscreen. Pass in the controls prop to make them appear.

00:00
00:00

Video with children

Video component can show components in the chilren prop on top of the html video element, while under the controls.
The children of Video are not same as the children of the html video element; they're "outside" the html video element.

00:00
00:00

Video updates

Video is robust enough to handle any updates, such as changing the source, volume, or speed.

00:00
00:00