Video built on the HTML5 video element

bit import grommet.react-components/media/video

Video built on the HTML5 video element.

Callers must include child <source> elements according to the HTML5 <video> specification.

Example

import Video from 'grommet/components/Video';

<Video autoPlay={true}
  full={true}
  loop={true}
  muted={true}
  poster='/img/mobile_first.jpg'
  shareLink='http://grommet.io'
  shareText='Sample share text'
  timeline={[{"label": "Chapter 1", "time": 0}, {"label": "Chapter 2", "time": 10}, {"label": "Chapter 3", "time": 20}]}
  title='Sample Title'>
  <source src='/video/test.mp4'
    type='video/mp4' />
</Video>
NameTypeDescription
alignPropTypes.shape

How to align the video when full. You can specify one of top|bottom and/or one of left|right. If not provided, the video is centered.

allowFullScreenPropTypes.bool

Enables fullscreen/expand control button on player.

autoPlayPropTypes.bool

Enables automatic playback of the video as soon as it is loaded. Defaults to false.

colorIndexPropTypes.string

The color identifier to use for the background color. For example: 'neutral-1’. This is visible when a poster image is not the same aspect ratio as the video.

fit["contain", "cover"]

How the video should be scaled to fit in the container. Setting this property also sets full=’true’.

full(Proptypes.bool|horizontal|vertical)

Whether the image should expand to fill the available width and/or height.

loopPropTypes.bool

Enables continuous video looping. Defaults to false.

mutedPropTypes.bool

Enables video muting. This option is best used with the autoPlay flag. Defaults to false.

posterPropTypes.string

Poster image to show before the video first plays.

shareLinkPropTypes.string

Link to be used for social media sharing. Shown at the end of the video.

shareHeadlinePropTypes.string

Headline to be used for social media sharing.

shareTextPropTypes.string

Text to be used for social media sharing.

showControlsPropTypes.bool

Show controls such as play button, progress bar, etc. on top of video. Defaults to true.

size["small", "medium", "large"]

The width of the Video. Defaults to medium unless the full option is specified. The height will adapt to the aspect ratio of the video.

timelineArray<PropTypes.object>

An array of: {label: <string>, seconds: <number>} used to indicate chapter markers.

titlePropTypes.node

Descriptive title.

Test Summary

has correct default optionsTests didn't run
transfers arbitrary propsTests didn't run