Video native

An inline video player with native controls.

A2UI basic: Video
Children: none

Preview

Loading the renderer…

srcrequired

poster

durationMs

autoplay

aspectRatio

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Video",
          "src": "https://example.com/clip.mp4",
          "durationMs": 12000
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Video rendered by the React renderer on Web — **Web** React

Video rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Video rendered by the Compose renderer on Android — **Android** Compose

Video rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-video, painted by each native renderer.

Props

Prop	Type	Default	Description
`src`requiredbind	`url`	–	The video URL (H.264 + AAC MP4 plays everywhere).
`poster`	`url`	–	A still shown before playback.
`durationMs`	`number`	–	Known length for the scrubber.
`autoplay`	`boolean`	`false`	Starts muted playback on appear.
`aspectRatio`	`number`	`1.7777778`	Width over height of the player box.
`style`	`style`	–	Extra Box styles for the player box.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: group
Semantics: video with the platform's controls

Keys	Action
`Space`	play/pause; ArrowLeft/ArrowRight: seek 5 s

Theming

Recipe parts: Video/rootVideo/controlsVideo/poster
Keyed by: autoplay:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme