Video

Video block.

Properties

src: { mp4, width?, height?} | { hls, width?, height?}

Parameters for the source video. You can specify a path to the video in MP4 or HLS format.

• mp4: string

  A string with the URL of the source in MP4 format.

• hls: string

  A string with the URL of the source in HLS format.

• width: number

  The width of the source. Must be specified along with height. Specifying both width and height is necessary to determine the aspect ratio of the <video> block. The specified size may differ from the actual one, and it is this size that is considered during display. If the specified proportions do not match those of the source, it will fit into the specified proportions according to resizeMode.

  If the source dimensions are not specified, the proportions are calculated based on the poster after it is loaded. If the proportions of the poster differ from 16:9, there may be a visual jump in the proportions of the <video> block after loading the poster. If neither poster nor its loading has been specified, the proportions are assumed to be 16:9.

• height: number

  The height of the source. See width above.

poster: string

URL of the video preview image. See src.width above regarding the possible influence of poster on the proportions of the entire <video> block.

autoplay: bool

Default: false

Automatically play the video when the page is opened. In browsers, if the opening was via an external link and the site is not bookmarked, the video starts without sound. The user can enable sound by clicking the corresponding control icon in the block.

muted: bool

Default: false

Play the video without sound. The user cannot enable sound.

loop: bool

Default: false

Cyclic playback of the sound.

controls: VideoControls

Default: compact

Video control elements.

• full — controls at the bottom of the block, with a scrubber bar.

• compact — controls in the center, with buttons for scrubbing instead of a bar.

• mini — only play and pause buttons.

• none — only the original play button.

preferredQuality: number

Preferred playback quality. There is no guarantee that the actual playback quality will match the preferred one.

Example values:

• 360
• 480
• 720
• 1080

resizeMode: Resize

Default: contain

Method of placing the video in case the display proportions differ from the source.

• cover — The video fits covering the entire display area. Part of the video that does not fit into the area becomes invisible. Proportions are preserved.

• contain — The video fits entirely, with margins on the sides for missing data. Proportions are preserved.

• stretch — The video stretches to the edges of the area. Proportions are ignored.

onVideoEnd: Action

Default: false

Action triggered at the end of the video.

style

Change the appearance, position, and geometry of the block.

• width: number | percentage

Width of the block in percentages or pixels. By default, if known, either src.width or the width of the poster is used. Otherwise, the width is taken as 100% if the flexDirection of the parent container is set to column.

• height: number | percentage

Height of the block in percentages or pixels. By default, if known, either src.height or the height of the poster is used. Otherwise, the height is taken as 200 pixels if the flexDirection of the parent container is set to row.

• maxWidth, minWidth
  Width of the block. More details.

• maxHeight, minHeight
  Height of the block. More details.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  External margins of the block. More details.

• position
  Method of positioning the block: relative or absolute. More details.

• top, right, bottom, left
  Offset from the original position. More details.

• border
  Setting borders for the block on all four sides: thickness, style, and color. More details.

• borderTop, borderRight, borderBottom, borderLeft
  Setting individual borders for the sides of the block: thickness and color. More details.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Rounding the corners of the borders. More details.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Thickness of the borders. More details.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Color of the borders. More details.

• backgroundColor
  Background color of the block. More details.

• backgroundGradient
  Background gradient of the block. More details.

• opacity
  Opacity of the entire block with its content. More details.

• elevation
  Shadow height. More details.

• shadowColor
  Color of the block's shadow. More details.

• flexBasis
  Initial size of the block along the main axis of the container. More details.

• flexGrow
  Growth factor of the block along the main axis of the container. More details.

• flexShrink
  Shrinkage factor of the block along the main axis of the container. More details.

• flex
  Defines the behavior of the block's size (growth, shrinkage, and initial size) along the main axis of the container. More details.

• alignSelf
  Alignment of a specific block across the main axis of the container. More details.

Example

---

Minimal example, without poster. Before playback starts, only a black rectangle is displayed.

---

An example similar to the previous one, but with vertical video. Without specifying the size of the source video or poster, the video fits into the horizontal 16:9 proportions.

---

Vertical video with poster. The size of the block adapts to the size of the poster. There may be a jump in the block sizes when opening the page during the loading of the poster.

---

Vertical video with poster and specifying the size of the source video. The size of the block adapts to the proportions of the source video. The block is displayed immediately in the required size, without jumping during the page load.

---

The styles of the block specify sizes with proportions different from those of the video. resizeMode='cover' is set, fitting the video to cover the entire display area. Part of the video that does not fit into the area becomes invisible. Proportions are preserved.

---

The styles of the block specify sizes with proportions different from those of the video. resizeMode='stretch' is set, stretching the video to the edges of the area. Proportions are ignored.

---

Block with controls='full'.

---

Block with controls='compact'.

---

Block with controls='mini'.

---

Block with controls='none'.

---

Block with onVideoEnd. It will show a pop-up message at the end of the video playback.

---