Video
A video with the platform’s own controls, a fixed aspect ratio, captions on web and an error state.Video with a poster
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Video } from '@advui/core'
<Video
src="https://example.org/training/handwashing.mp4"
poster="https://example.org/training/handwashing.jpg"
title="Handwashing in five steps"
captions={[{ src: '/captions/handwashing.en.vtt', srcLang: 'en', label: 'English', default: true }]}
/>
// iOS and Android: register a player once at app start (see Platform notes).
import { setVideoView } from '@advui/core'
import { VideoView, useVideoPlayer } from 'expo-video'Examples
Square, muted and looping
Preview
Code
API reference
Video
Also takes View props (`maxWidth`, `borderRadius`…) for the frame.| Prop | Type | Default | Description |
|---|---|---|---|
src required | string | number | — | A URL, or `require()` of a bundled file on native. |
title required | string | — | Accessible name. Say what the video shows. |
poster | string | — | Image shown before playback (web). |
captions | VideoCaptionTrack[] | — | WebVTT tracks: `src`, `srcLang`, `label`, `kind` (`captions` or `subtitles`), `default`. Web. |
crossOrigin | 'anonymous' | 'use-credentials' | — | Fetches the video and captions with CORS. Browsers only load caption files from another origin with it, and that server must allow it. Web. |
ratio | number | 16 / 9 | Width / height. |
autoPlay | boolean | false | Starts playing, muted (browsers block autoplay with sound). |
muted | boolean | `autoPlay` | No sound. |
loop | boolean | false | Plays again at the end. |
controls | boolean | true | The platform’s play, seek, volume and full-screen controls. |
onEnded | () => void | — | Called when playback reaches the end. |
onError | () => void | — | Called when the video fails to load or play. |
labels | Partial<VideoLabels> | — | Error text, for translation. |
setVideoView
Registers the native player: a component that takes `NativeVideoViewProps` (`source`, `autoPlay`, `muted`, `loop`, `controls`, `accessibilityLabel`, `onEnded`, `onError`, `style`). Call it once at app start.Accessibility
- The platform controls are keyboard and screen-reader accessible:
<video controls>on web, the native player on iOS and Android. titlenames the video. Addcaptionswhenever it has speech: they are required by WCAG 1.2.2, and many viewers watch without sound.- Avoid
autoPlayfor anything longer than a few seconds; if you use it, keepcontrolsso it can be paused. - When the video cannot be played, a message replaces it.
| Key | Action |
|---|---|
| Tab | Moves through the player’s controls (web). |
| Space | Play or pause, on the focused control. |
Responsive behavior
Fills its container’s width and keeps ratio; set maxWidth to limit it.
Platform notes
Web
A
<video> element with playsInline (no forced full screen on iPhone Safari) and preload="metadata".iOS
Uses the player registered with
setVideoView, e.g. a wrapper around expo-video (see the Expo playground’s _layout.tsx). Without one it shows the error message and warns in development. poster, captions and crossOrigin are web only.Android
Same as iOS.