SwiftUI.js
Components

VideoPlayer

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

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

Examples

Examples

Preview unavailable for this example in the static docs build.

Examples

Preview unavailable for this example in the static docs build.

Show code
<VideoPlayer {...args}>
      <p>Your browser does not support inline video playback.</p>
    </VideoPlayer>

Examples

Preview unavailable for this example in the static docs build.

Show code
<VideoPlayer poster="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80"></VideoPlayer>

API

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

Inherits additional props from IBaseElementComponent<'video'>.

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

Status: adapted

SwiftUI Correspondence: Adapted from AVKit's VideoPlayer.

Notes

  • 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.

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.

On this page

Notes