Components

VideoPlayer

VideoPlayer wraps the native browser video element while keeping SwiftUI's dedicated media-player mental model.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { VideoPlayer } from '@swiftuijs/ui';
export default function Example() {
    return (<VideoPlayer aria-label="Sample trailer" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"></VideoPlayer>);
}

Status: adapted

Usage and limitations

  • Playback UI comes from the browser's native video controls.
  • The component is intentionally thin and keeps the underlying <video> element available.
  • The player exposes a data-state attribute and onPlaybackStateChange callback for loading, ready, playing, paused, and error.
  • Empty or missing src is treated as an immediate error state instead of a perpetual loading placeholder.

More examples

With Fallback
With Poster

API reference

PropTypeRequiredDescription
srcstringYesVideo source URL.
onPlaybackStateChange(state: 'loading' | 'ready' | 'playing' | 'paused' | 'error') => voidNoEmits the current media playback state.

Inherits additional props from IBaseElementComponent<'video'>.

Edit this page on GitHubReport an issue

Unredacted

Unredacted adapts SwiftUI's `unredacted` modifier into an explicit wrapper that opts nested content out of placeholder styling.

ViewThatFits

ViewThatFits picks the first layout variant that fits the available width. The web version uses `data-min-width` hints on child views to choose an appropriate variant.