Video

View source on GitHub

Like Image, Video 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
`accessibilityMaximizeLabel` Required	`string`	-
	Accessibility label for the fullscreen maximize button if controls are shown. See controls example for more details.
`accessibilityMinimizeLabel` Required	`string`	-
	Accessibility label for the fullscreen minimize button if controls are shown. See controls example for more details.
`accessibilityMuteLabel` Required	`string`	-
	Accessibility label for the mute button if controls are shown. See controls example for more details.
`accessibilityPauseLabel` Required	`string`	-
	Accessibility label for the pause button if controls are shown. See controls example for more details.
`accessibilityPlayLabel` Required	`string`	-
	Accessibility label for the play button if controls are shown. See controls example for more details.
`accessibilityProgressBarLabel` Required	`string`	-
	Accessibility label for progress bar. See controls example for more details.
`accessibilityUnmuteLabel` Required	`string`	-
	Accessibility label for the unmute button if controls are shown. See controls example for more details.
`aspectRatio` Required	`number`	-
	Proportional relationship between width and height of the video, calculated as width / height.
`captions` Required	`string`	-
	The URL of the captions track for the video (.vtt file).
`src` Required	`string \| $ReadOnlyArray<{\| 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. See multiple sources example for more details.
`accessibilityHideCaptionsLabel`	`string`	-
	Accessibility label for the button to hide captions if controls are shown. See controls example for more details.
`accessibilityShowCaptionsLabel`	`string`	-
	Accessibility label for the button to show captions if controls are shown. See controls example for more details.
`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. See children example for more details.
`controls`	`boolean`	-
	Show the video player controls. See controls example for more details.
`crossOrigin`	`"anonymous" \| "use-credentials"`	-
	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.
`loop`	`boolean`	-
	Indicates if 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`	-
	Callback triggered when the metadata has loaded or changed, indicating a change in duration. See updates example for more details.
`onEnded`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when playback of the video completes. See updates example for more details.
`onError`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when an error occurs. See updates example for more details.
`onFullscreenChange`	`({\| event: Event, fullscreen: boolean \|}) => void`	-
	Callback triggered when the video full screen status changes. See updates example for more details.
`onLoadedChange`	`({\| event: SyntheticEvent<HTMLVideoElement>, loaded: number \|}) => void`	-
	Callback triggered when progress happens on downloading the media. See updates example for more details.
`onLoadStart`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when the media has started to load. See updates example for more details.
`onPause`	`({\| event: SyntheticEvent<HTMLDivElement> \| SyntheticEvent<HTMLAnchorElement>, \|}) => void`	-
	Callback triggered when playback is paused. See updates example for more details.
`onPlay`	`({\| event: SyntheticEvent<HTMLDivElement> \| SyntheticEvent<HTMLAnchorElement>, \|}) => void`	-
	Callback triggered when playback of the media starts after having been paused. See updates example for more details.
`onPlayheadDown`	`({\| event: SyntheticMouseEvent<HTMLDivElement> \|}) => void`	-
	Callback triggered when mouse down event occurs on playhead. See updates example for more details.
`onPlayheadUp`	`({\| event: SyntheticMouseEvent<HTMLDivElement> \|}) => void`	-
	Callback triggered when mouse up event occurs on playhead. See updates example for more details.
`onPlaying`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when playback of the media is ready to start after having been paused. See updates example for more details.
`onReady`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when video is loaded and ready to play. See updates example for more details.
`onSeek`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when a seek operation completes from the playhead. See updates example for more details.
`onSeeking`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when a seek operation begins. See updates example for more details.
`onStalled`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when trying to fetch data but the data is unexpectedly not forthcoming. See updates example for more details.
`onTimeChange`	`({\| event: SyntheticEvent<HTMLVideoElement>, time: number \|}) => void`	-
	Callback triggered when the time indicated by the element's currentTime attribute has changed. See updates example for more details.
`onVolumeChange`	`({\| event: SyntheticEvent<HTMLDivElement> \| SyntheticEvent<HTMLAnchorElement>, volume: number, \|}) => void`	-
	Callback triggered when the audio volume changes. See updates example for more details.
`onWaiting`	`({\| event: SyntheticEvent<HTMLVideoElement> \|}) => void`	-
	Callback triggered when playback has stopped because of a temporary lack of data. See updates example for more details.
`playbackRate`	`number`	`1`
	Specifies the speed at which the video plays: 1 for normal. See updates example for more details.
`playing`	`boolean`	`false`
	Specifies whether the video should play or not.
`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.
`poster`	`string`	-
	The image to show while the video is loading.
`preload`	`"auto" \| "metadata" \| "none"`	`"auto"`
	Specifies how, if at all, the video should be pre-loaded when the page loads.
`volume`	`number`	`0`
	Specifies the volume of the video audio: 0 for muted, 1 for max. See example for more details.

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
  aspectRatio={853 / 480}
  captions=""
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  src="https://media.w3.org/2010/05/bunny/movie.mp4"
/>

<Video
  aspectRatio={853 / 480}
  captions=""
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  src="https://media.w3.org/2010/05/bunny/movie.mp4"
/>

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.

<Video
  aspectRatio={426 / 240}
  captions=""
  playing
  src={[
    {
      type: "video/mp4",
      src: "https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    },
    {
      type: "video/ogg",
      src: "https://archive.org/download/ElephantsDream/ed_hd.ogv"
    },
  ]}
/>

<Video
  aspectRatio={426 / 240}
  captions=""
  playing
  src={[
    {
      type: "video/mp4",
      src: "https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    },
    {
      type: "video/ogg",
      src: "https://archive.org/download/ElephantsDream/ed_hd.ogv"
    },
  ]}
/>

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
  aspectRatio={1920 / 1080}
  captions=""
  loop
  playing
  src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
/>

<Video
  aspectRatio={1920 / 1080}
  captions=""
  loop
  playing
  src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
/>

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.

<Video
  accessibilityMaximizeLabel="Maximize"
  accessibilityMinimizeLabel="Minimize"
  accessibilityMuteLabel="Mute"
  accessibilityPauseLabel="Pause"
  accessibilityPlayLabel="Play"
  accessibilityProgressBarLabel="Progress bar"
  accessibilityUnmuteLabel="Unmute"
  aspectRatio={853 / 480}
  captions=""
  controls
  src="https://media.w3.org/2010/05/bunny/movie.mp4"
/>

<Video
  accessibilityMaximizeLabel="Maximize"
  accessibilityMinimizeLabel="Minimize"
  accessibilityMuteLabel="Mute"
  accessibilityPauseLabel="Pause"
  accessibilityPlayLabel="Play"
  accessibilityProgressBarLabel="Progress bar"
  accessibilityUnmuteLabel="Unmute"
  aspectRatio={853 / 480}
  captions=""
  controls
  src="https://media.w3.org/2010/05/bunny/movie.mp4"
/>

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.

<Video
  accessibilityMaximizeLabel="Maximize"
  accessibilityMinimizeLabel="Minimize"
  accessibilityMuteLabel="Mute"
  accessibilityPauseLabel="Pause"
  accessibilityPlayLabel="Play"
  accessibilityProgressBarLabel="Progress bar"
  accessibilityUnmuteLabel="Unmute"
  aspectRatio={853 / 480}
  captions=""
  controls
  playing
  src="https://media.w3.org/2010/05/bunny/movie.mp4"
>
  <Box width="100%" height="100%"
    display="flex"
    justifyContent="center"
    alignItems="center"
    dangerouslySetInlineStyle={{__style:{backgroundColor:'rgba(0, 0, 0, 0.3)'}}}>
      <IconButton
        accessibilityLabel="Love"
        bgColor="white"
        icon="trash-can"
        size="lg" />
  </Box>
</Video>

<Video
  accessibilityMaximizeLabel="Maximize"
  accessibilityMinimizeLabel="Minimize"
  accessibilityMuteLabel="Mute"
  accessibilityPauseLabel="Pause"
  accessibilityPlayLabel="Play"
  accessibilityProgressBarLabel="Progress bar"
  accessibilityUnmuteLabel="Unmute"
  aspectRatio={853 / 480}
  captions=""
  controls
  playing
  src="https://media.w3.org/2010/05/bunny/movie.mp4"
>
  <Box width="100%" height="100%"
    display="flex"
    justifyContent="center"
    alignItems="center"
    dangerouslySetInlineStyle={{__style:{backgroundColor:'rgba(0, 0, 0, 0.3)'}}}>
      <IconButton
        accessibilityLabel="Love"
        bgColor="white"
        icon="trash-can"
        size="lg" />
  </Box>
</Video>

Video updates

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

function Example() {
  const [input, setInput] = React.useState("https://media.w3.org/2010/05/bunny/movie.mp4");
  const [playbackRate, setPlaybackRate] = React.useState(1);
  const [playing, setPlaying] = React.useState(false);
  const [src, setSrc] = React.useState("https://media.w3.org/2010/05/bunny/movie.mp4");
  const [volume, setVolume] = React.useState(1);

  return (
    <Box>
      <Box paddingY={2}>
        <Box marginBottom={2}>
          <Label htmlFor="video-source">
            <Text>Video source URL</Text>
          </Label>
        </Box>
        <Box display="flex" marginStart={-1} marginEnd={-1}>
          <Box flex="grow" paddingX={1}>
            <TextField
              id="video-source"
              onChange={({ value }) => setInput(value)}
              value={input}
            />
          </Box>
          <Box paddingX={1}>
            <Button
              text="Submit"
              color="red"
              onClick={() => setSrc(input)}
            />
          </Box>
        </Box>
      </Box>
      <Box paddingY={2}>
        <Button
          text={volume === 0 ? "Unmute" : "Mute"}
          onClick={() => setVolume(volume === 0 ? 1 : 0)}
        />
      </Box>
      <Box display="flex" paddingY={2} marginStart={-1} marginEnd={-1}>
        <Box paddingX={1} column={6}>
          <Button
            text="Playback x0.5"
            onClick={() => setPlaybackRate(playbackRate / 2)}
          />
        </Box>
        <Box paddingX={1} column={6}>
          <Button
            text="Playback x2"
            onClick={() => setPlaybackRate(playbackRate * 2)}
          />
        </Box>
      </Box>
      <Video
        accessibilityMaximizeLabel="Maximize"
        accessibilityMinimizeLabel="Minimize"
        accessibilityMuteLabel="Mute"
        accessibilityPauseLabel="Pause"
        accessibilityPlayLabel="Play"
        accessibilityProgressBarLabel="Progress bar"
        accessibilityUnmuteLabel="Unmute"
        aspectRatio={853 / 480}
        captions=""
        controls
        onPlay={() => setPlaying(true)}
        onPause={() => setPlaying(false)}
        onVolumeChange={({ volume }) => setVolume(volume)}
        playbackRate={playbackRate}
        playing={playing}
        src={src}
        volume={volume}
      />
    </Box>
  );
}

function Example() {
  const [input, setInput] = React.useState("https://media.w3.org/2010/05/bunny/movie.mp4");
  const [playbackRate, setPlaybackRate] = React.useState(1);
  const [playing, setPlaying] = React.useState(false);
  const [src, setSrc] = React.useState("https://media.w3.org/2010/05/bunny/movie.mp4");
  const [volume, setVolume] = React.useState(1);

  return (
    <Box>
      <Box paddingY={2}>
        <Box marginBottom={2}>
          <Label htmlFor="video-source">
            <Text>Video source URL</Text>
          </Label>
        </Box>
        <Box display="flex" marginStart={-1} marginEnd={-1}>
          <Box flex="grow" paddingX={1}>
            <TextField
              id="video-source"
              onChange={({ value }) => setInput(value)}
              value={input}
            />
          </Box>
          <Box paddingX={1}>
            <Button
              text="Submit"
              color="red"
              onClick={() => setSrc(input)}
            />
          </Box>
        </Box>
      </Box>
      <Box paddingY={2}>
        <Button
          text={volume === 0 ? "Unmute" : "Mute"}
          onClick={() => setVolume(volume === 0 ? 1 : 0)}
        />
      </Box>
      <Box display="flex" paddingY={2} marginStart={-1} marginEnd={-1}>
        <Box paddingX={1} column={6}>
          <Button
            text="Playback x0.5"
            onClick={() => setPlaybackRate(playbackRate / 2)}
          />
        </Box>
        <Box paddingX={1} column={6}>
          <Button
            text="Playback x2"
            onClick={() => setPlaybackRate(playbackRate * 2)}
          />
        </Box>
      </Box>
      <Video
        accessibilityMaximizeLabel="Maximize"
        accessibilityMinimizeLabel="Minimize"
        accessibilityMuteLabel="Mute"
        accessibilityPauseLabel="Pause"
        accessibilityPlayLabel="Play"
        accessibilityProgressBarLabel="Progress bar"
        accessibilityUnmuteLabel="Unmute"
        aspectRatio={853 / 480}
        captions=""
        controls
        onPlay={() => setPlaying(true)}
        onPause={() => setPlaying(false)}
        onVolumeChange={({ volume }) => setVolume(volume)}
        playbackRate={playbackRate}
        playing={playing}
        src={src}
        volume={volume}
      />
    </Box>
  );
}

Edit page on GitHub