Class UIMediaPlayer

A versatile media player supporting audio and video playback from URL sources or in-memory binary blobs.

Built-in transport controls (play/pause, seek, volume, mute, playback rate, fullscreen) are shown by default but can be hidden via [controls]="false" for fully custom UIs that drive the player programmatically.

Text tracks (subtitles, captions, chapters, etc.) are supported via the [tracks] input and rendered as native <track> elements, leaving room for future expansion.

Example

<!-- Video from URL — poster auto-generated if omitted -->
<ui-media-player
  type="video"
  [source]="{ url: 'https://example.com/video.mp4', type: 'video/mp4' }"
/>

<!-- Explicit poster -->
<ui-media-player
  type="video"
  [source]="{ url: 'https://example.com/video.mp4', type: 'video/mp4' }"
  poster="https://example.com/poster.jpg"
/>

<!-- YouTube embed (requires registering youTubeEmbedProvider) -->
<ui-media-player
  type="video"
  [source]="{ url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' }"
/>

<!-- Audio from Blob -->
<ui-media-player
  type="audio"
  [source]="{ blob: audioBlob, type: 'audio/wav' }"
  [controls]="true"
/>

Constructors

constructor

new UIMediaPlayer(): UIMediaPlayer
Returns UIMediaPlayer
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:355

Properties

`Readonly`ariaLabel

ariaLabel: InputSignal<string> = ...

Accessible label for the media player region.

`Readonly`autoplay

autoplay: InputSignal<boolean> = ...

Whether to autoplay when a source is set.

`Readonly`controls

controls: InputSignal<boolean> = ...

Whether to show built-in transport controls.

`Readonly`crossOrigin

crossOrigin: InputSignal<MediaCrossOrigin | null> = ...

CORS setting for the underlying media element.

Defaults to 'anonymous' so that cross-origin videos can be drawn to a canvas for automatic poster-frame generation. Set to null to omit the attribute entirely (disables poster auto-generation for cross-origin resources).

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

`Readonly`disabled

disabled: InputSignal<boolean> = ...

Whether the media player is disabled.

`Readonly`errorIcon

errorIcon: "<circle cx=\"12\" cy=\"12\" r=\"10\" /><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" /><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" />" = UIIcons.Lucide.Notifications.CircleAlert

SVG content for the error state icon (Lucide CircleAlert).

`Readonly`fit

fit: InputSignal<MediaFit> = ...

How video is fitted within the viewport (CSS object-fit).

`Readonly`hasError

hasError: Signal<boolean> = ...

Whether the player is in an error state.

`Readonly`isEmbed

isEmbed: Signal<boolean> = ...

Whether the player is in embed (iframe) mode rather than native <video> / <audio> playback.

`Readonly`loop

loop: InputSignal<boolean> = ...

Whether playback should loop.

`Readonly`mediaEnded

mediaEnded: OutputEmitterRef<MediaPlayerEvent> = ...

Emitted when playback ends.

`Readonly`mediaError

mediaError: OutputEmitterRef<MediaPlayerEvent> = ...

Emitted on playback error.

`Readonly`mediaLoadedMetadata

mediaLoadedMetadata: OutputEmitterRef<MediaPlayerEvent> = ...

Emitted when metadata (duration, dimensions) has loaded.

`Readonly`mediaPause

mediaPause: OutputEmitterRef<MediaPlayerEvent> = ...

Emitted when playback is paused.

`Readonly`mediaPlay

mediaPlay: OutputEmitterRef<MediaPlayerEvent> = ...

Emitted when playback begins.

`Readonly`mediaTimeUpdate

mediaTimeUpdate: OutputEmitterRef<MediaPlayerEvent> = ...

Emitted when the current time changes (throttled to animation frames).

`Readonly`muted

muted: ModelSignal<boolean> = ...

Whether the media should start muted.

`Readonly`playbackRates

playbackRates: InputSignal<readonly number[]> = ...

Available playback rates for the rate selector.

`Readonly`poster

poster: InputSignal<string> = ...

Poster image URL shown before playback begins (video only).

When omitted (or set to an empty string) the component automatically captures a frame from the loaded video and uses it as the poster, so there is always a meaningful preview instead of a black rectangle.

`Readonly`preload

preload: InputSignal<MediaPreload> = ...

Resource preload strategy.

`Readonly`source

source: InputSignal<MediaSource | null> = ...

The media source (URL or Blob).

`Readonly`sources

sources: InputSignal<readonly MediaSource[]> = ...

Multiple sources for format fallback.

When provided, these are rendered as <source> elements inside the media element, giving the browser format negotiation. If source is also set it is prepended to this list.

`Readonly`tracks

tracks: InputSignal<readonly MediaTrack[]> = ...

Text tracks (subtitles, captions, chapters, metadata).

`Readonly`type

type: InputSignal<MediaType> = ...

The type of media element to render.

`Readonly`volume

volume: ModelSignal<number> = ...

Initial volume 0..1.

Methods

pauseMedia

pauseMedia(): void
Pause playback.

Returns void
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:378

playMedia

playMedia(): void
Start or resume playback.

Returns void
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:371

requestFullscreen

requestFullscreen(): void
Request fullscreen on the media element (video only).

Returns void
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:425

seekTo

seekTo(time: number): void
Seek to a specific time in seconds.
Parameters
- time: number
Returns void
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:394

setPlaybackRate

setPlaybackRate(rate: number): void
Set the playback rate.
Parameters
- rate: number
Returns void
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:417

setVolume

setVolume(vol: number): void
Set the playback volume (0..1).
Parameters
- vol: number
Returns void
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:401

toggleMute

toggleMute(): void
Toggle mute state.

Returns void
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:409

togglePlay

togglePlay(): void
Toggle between play and pause.

Returns void
- Defined in packages/ui-kit/src/lib/media-player/media-player.component.ts:383

Class UIMediaPlayer

Example

Index

Constructors

Properties

Methods

Constructors

constructor

Returns UIMediaPlayer

Properties

ReadonlyariaLabel

Readonlyautoplay

Readonlycontrols

ReadonlycrossOrigin

See

Readonlydisabled

ReadonlyerrorIcon

Readonlyfit

ReadonlyhasError

ReadonlyisEmbed

Readonlyloop

ReadonlymediaEnded

ReadonlymediaError

ReadonlymediaLoadedMetadata

ReadonlymediaPause

ReadonlymediaPlay

ReadonlymediaTimeUpdate

Readonlymuted

ReadonlyplaybackRates

Readonlyposter

Readonlypreload

Readonlysource

Readonlysources

Readonlytracks

Readonlytype

Readonlyvolume

Methods

pauseMedia

Returns void

playMedia

Returns void

requestFullscreen

Returns void

seekTo

Parameters

Returns void

setPlaybackRate

Parameters

Returns void

setVolume

Parameters

Returns void

toggleMute

Returns void

togglePlay

Returns void

Settings

On This Page

`Readonly`ariaLabel

`Readonly`autoplay

`Readonly`controls

`Readonly`crossOrigin

`Readonly`disabled

`Readonly`errorIcon

`Readonly`fit

`Readonly`hasError

`Readonly`isEmbed

`Readonly`loop

`Readonly`mediaEnded

`Readonly`mediaError

`Readonly`mediaLoadedMetadata

`Readonly`mediaPause

`Readonly`mediaPlay

`Readonly`mediaTimeUpdate

`Readonly`muted

`Readonly`playbackRates

`Readonly`poster

`Readonly`preload

`Readonly`source

`Readonly`sources

`Readonly`tracks

`Readonly`type

`Readonly`volume