# Video Player

Play RestGO videos and HLS/DASH manifests.

URL: https://webrad.atentor.com/docs/video-player
Updated: 2026-11-07

WebVideoPlayer · Standard · Visual · 8 events

## Quick start

Add **VideoPlayer1** in the Designer. Use the example in a page method.

```ts
VideoPlayer1.aspectRatio = '16:9';
VideoPlayer1.controls = true;
VideoPlayer1.autoplay = false;
VideoPlayer1.volume = 0.8;
try {
  await VideoPlayer1.LoadRestGo('VIDEO-ID', { public: false });
  await VideoPlayer1.Play();
} catch (error) {
  Message(error instanceof Error ? error.message : String(error));
}
// Alternative: LoadUrl('https://cdn.example.com/master.m3u8', { format: 'hls' }).
```

Use a RestGO source or HLS/DASH manifest. Play() may fail due to autoplay policy; handle the Promise.

- Configure the source in the Inspector and confirm **Apply source**, or call LoadRestGo() or LoadUrl().
- Use Play(), Pause(), Stop(), and Seek(seconds). SetQuality('auto') enables automatic selection; availableQualities lists the options.
- Configure volume, muted, playbackRate, controls, loop, and aspectRatio for your interface.
- Private RestGO video uses the current session. Video page URLs do not replace HLS/DASH manifests.
- Unload() releases the source. OnLoaded, OnPlay, OnPause, OnEnded, and OnError track playback.

## More examples

HLS, DASH, quality, and playback control

```ts
await VideoPlayer1.LoadUrl('https://cdn.example.com/manifest.mpd', { format: 'dash' });
VideoPlayer1.muted = true;
VideoPlayer1.loop = false;
VideoPlayer1.playsInline = true;
VideoPlayer1.objectFit = 'contain'; // contain | cover | fill
VideoPlayer1.aspectRatio = '9:16'; // none | 16:9 | 9:16
VideoPlayer1.SetQuality('auto');
const variant = VideoPlayer1.availableQualities[0];
if (variant) VideoPlayer1.SetQuality(variant.quality);
await VideoPlayer1.Play();
VideoPlayer1.Pause();
VideoPlayer1.Seek(10);
VideoPlayer1.Stop();
await VideoPlayer1.Unload();
```

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `x` — Left · Size & position | `number` | `0` | x |
| `y` — Top · Size & position | `number` | `0` | y |
| `width` — Width · Size & position | `number` | `480` | width |
| `height` — Height · Size & position | `number` | `270` | height |
| `itemWidth` — Responsive width · Responsive size — Fit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemHeight` — Responsive height · Responsive size — Fit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemMinWidth` — Minimum width · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxWidth` — Maximum width · Responsive size | `number` | `null` | Inspector / configuration |
| `itemMinHeight` — Minimum height · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxHeight` — Maximum height · Responsive size | `number` | `null` | Inspector / configuration |
| `itemGrow` — Grow · Responsive size | `number` | `0` | Inspector / configuration |
| `itemShrink` — Shrink · Responsive size — Allows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed. | `boolean` | `true` | Inspector / configuration |
| `itemAlignSelf` — Item alignment · Responsive size — Cross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior. | `enum` — `auto` `start` `center` `end` `stretch` | `"auto"` | Inspector / configuration |
| `itemHorizontalAnchor` — Horizontal anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemVerticalAnchor` — Vertical anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemLeft` — Left inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemRight` — Right inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemTop` — Top inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemBottom` — Bottom inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `margin` — Margin · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginLeft |
| `visible` — Visible · Behavior | `boolean` | `true` | visible |
| `collapseWhenHidden` — Collapse when hidden · Behavior — Removes the component from the layout while it is not visible. | `boolean` | `true` | collapseWhenHidden |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `tabIndex` — TabIndex · Behavior | `number` | `0` | tabIndex |
| `aspectRatio` — Aspect ratio · Video — Keep a fixed ratio by calculating height from the responsive width. none uses the saved height rules. | `enum` — `none` `16:9` `9:16` | `"none"` | aspectRatio |
| `source` — Video source · Video | `video-source` | `null` | source |
| `controls` — Show controls · Video | `boolean` | `true` | controls |
| `autoplay` — Autoplay · Video | `boolean` | `false` | autoplay |
| `muted` — Muted · Video | `boolean` | `false` | muted |
| `loop` — Loop · Video | `boolean` | `false` | loop |
| `playsInline` — Play inline · Video | `boolean` | `true` | playsInline |
| `volume` — Volume (0–1) · Video | `number` | `1` | volume |
| `playbackRate` — Playback rate · Video | `number` | `1` | playbackRate |
| `objectFit` — Object fit · Appearance | `enum` — `contain` `cover` `fill` `none` `scale-down` | `"contain"` | objectFit |
| `quality` — Initial quality · Video — Manual qualities are discovered from the loaded video. Use the playback quality menu or SetQuality(). | `enum` — `auto` | `"auto"` | quality |
| `poster` — Poster · Appearance — Optional poster URL. RestGo thumbnails are fetched with the current access policy. | `string` | `""` | poster |
| `currentRowBindings` — Current row · Data — Bind writable visual values to fields of this repeated row. | `current-row-bindings` — Editor: current-row-bindings | `[]` | currentRowBindings |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `source` | `get source(): WebVideoPlayerSource \| null;` | Read and write |
| `controls` | `get controls(): boolean;` | Read and write |
| `autoplay` | `get autoplay(): boolean;` | Read and write |
| `muted` | `get muted(): boolean;` | Read and write |
| `loop` | `get loop(): boolean;` | Read and write |
| `playsInline` | `get playsInline(): boolean;` | Read and write |
| `volume` | `get volume(): number;` | Read and write |
| `playbackRate` | `get playbackRate(): number;` | Read and write |
| `objectFit` | `get objectFit(): WebVideoPlayerObjectFit;` | Read and write |
| `aspectRatio` — Fixed ratios derive height from the responsive width, overriding vertical sizing rules. | `get aspectRatio(): WebVideoPlayerAspectRatio;` | Read and write |
| `poster` | `get poster(): string;` | Read and write |
| `enabled` | `get enabled(): boolean;` | Read and write |
| `quality` | `get quality(): WebVideoPlayerQuality;` | Read and write |
| `state` | `get state(): WebVideoPlayerState;` | Read-only |
| `duration` | `get duration(): number;` | Read-only |
| `currentTime` | `get currentTime(): number;` | Read-only |
| `buffered` | `get buffered(): readonly WebVideoPlayerBufferedRange[];` | Read-only |
| `availableQualities` | `get availableQualities(): readonly WebVideoPlayerAvailableQuality[];` | Read-only |
| `currentQuality` | `get currentQuality(): number \| null;` | Read-only |
| `isPlaying` | `get isPlaying(): boolean;` | Read-only |
| `error` | `get error(): Error \| null;` | Read-only |
| `onLoaded` | `set onLoaded(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onPlay` | `set onPlay(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onPause` | `set onPause(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onEnded` | `set onEnded(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onTimeUpdate` | `set onTimeUpdate(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onBuffering` | `set onBuffering(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onQualityChange` | `set onQualityChange(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onError` | `set onError(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `LoadRestGo`

method

```ts
LoadRestGo(videoId: string, options?: WebVideoPlayerRestGoOptions): Promise<void>;
```

Example

```ts
await VideoPlayer1.LoadRestGo('VIDEO-ID', { public: false });
```

### `LoadUrl`

method

```ts
LoadUrl(url: string, options?: WebVideoPlayerUrlOptions): Promise<void>;
```

Example

```ts
await VideoPlayer1.LoadUrl('https://cdn.example.com/master.m3u8', { format: 'hls' });
```

### `Play`

method

```ts
Play(): Promise<void>;
```

Example

```ts
await VideoPlayer1.Play();
```

### `Pause`

method

```ts
Pause(): void;
```

Example

```ts
VideoPlayer1.Pause();
```

### `Stop`

method

```ts
Stop(): void;
```

Example

```ts
VideoPlayer1.Stop();
```

### `Seek`

method

```ts
Seek(seconds: number): void;
```

Example

```ts
VideoPlayer1.Seek(10);
```

### `SetQuality`

method

```ts
SetQuality(value: WebVideoPlayerQuality): void;
```

Example

```ts
VideoPlayer1.SetQuality('auto');
```

### `Unload`

method

```ts
Unload(): Promise<void>;
```

Example

```ts
await VideoPlayer1.Unload();
```

### `dispose`

method

```ts
dispose(): void;
```

Example

```ts
// Call only when disposing of an instance whose lifecycle you control.
VideoPlayer1.dispose();
```

Inherited members (25)

| Member | Signature | Access |
| --- | --- | --- |
| `currentRowBindings` | `currentRowBindings: readonly WebCurrentRowBinding[];` | Read and write |
| `element` | `readonly element: TElement;` | Read-only |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |
| `visible` | `visible: boolean;` | Read and write |
| `collapseWhenHidden` | `collapseWhenHidden: boolean;` | Read and write |
| `x` | `x: number;` | Read and write |
| `y` | `y: number;` | Read and write |
| `width` | `width: number;` | Read and write |
| `height` | `height: number;` | Read and write |
| `margin` — Outer spacing on all four sides, in pixels. | `margin: number;` | Read and write |
| `marginTop` | `marginTop: number;` | Read and write |
| `marginRight` | `marginRight: number;` | Read and write |
| `marginBottom` | `marginBottom: number;` | Read and write |
| `marginLeft` | `marginLeft: number;` | Read and write |
| `alignSelf` | `alignSelf: RuntimeLayoutAlignSelf;` | Read and write |
| `tabIndex` | `tabIndex: number;` | Read and write |
| `backgroundColor` | `backgroundColor: string;` | Read and write |
| `color` | `color: string;` | Read and write |
| `borderColor` | `borderColor: string;` | Read and write |

### `focus`

method

```ts
focus(options?: FocusOptions): void;
```

### `show`

method

```ts
show(): void;
```

### `hide`

method

```ts
hide(): void;
```

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnLoaded

[WebVideoPlayerLoadedEventDetail](https://webrad.atentor.com/docs/types#webvideoplayerloadedeventdetail) in `event.detail` · `source`, `duration`, `availableQualities`

Signature and example

```ts
import type { WebVideoPlayer, WebVideoPlayerLoadedEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoPlayer1Loaded(
    sender: WebVideoPlayer,
    event: CustomEvent<WebVideoPlayerLoadedEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { source, duration, availableQualities } = event.detail;
    console.log(source, duration, availableQualities);
  }
}
```

### OnPlay

[WebVideoPlayerTimeEventDetail](https://webrad.atentor.com/docs/types#webvideoplayertimeeventdetail) in `event.detail` · `currentTime`, `duration`

Signature and example

```ts
import type { WebVideoPlayer, WebVideoPlayerTimeEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoPlayer1Play(
    sender: WebVideoPlayer,
    event: CustomEvent<WebVideoPlayerTimeEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { currentTime, duration } = event.detail;
    console.log(currentTime, duration);
  }
}
```

### OnPause

[WebVideoPlayerTimeEventDetail](https://webrad.atentor.com/docs/types#webvideoplayertimeeventdetail) in `event.detail` · `currentTime`, `duration`

Signature and example

```ts
import type { WebVideoPlayer, WebVideoPlayerTimeEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoPlayer1Pause(
    sender: WebVideoPlayer,
    event: CustomEvent<WebVideoPlayerTimeEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { currentTime, duration } = event.detail;
    console.log(currentTime, duration);
  }
}
```

### OnEnded

[WebVideoPlayerTimeEventDetail](https://webrad.atentor.com/docs/types#webvideoplayertimeeventdetail) in `event.detail` · `currentTime`, `duration`

Signature and example

```ts
import type { WebVideoPlayer, WebVideoPlayerTimeEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoPlayer1Ended(
    sender: WebVideoPlayer,
    event: CustomEvent<WebVideoPlayerTimeEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { currentTime, duration } = event.detail;
    console.log(currentTime, duration);
  }
}
```

### OnTimeUpdate

[WebVideoPlayerTimeEventDetail](https://webrad.atentor.com/docs/types#webvideoplayertimeeventdetail) in `event.detail` · `currentTime`, `duration`

Signature and example

```ts
import type { WebVideoPlayer, WebVideoPlayerTimeEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoPlayer1TimeUpdate(
    sender: WebVideoPlayer,
    event: CustomEvent<WebVideoPlayerTimeEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { currentTime, duration } = event.detail;
    console.log(currentTime, duration);
  }
}
```

### OnBuffering

[WebVideoPlayerBufferingEventDetail](https://webrad.atentor.com/docs/types#webvideoplayerbufferingeventdetail) in `event.detail` · `buffering`

Signature and example

```ts
import type { WebVideoPlayer, WebVideoPlayerBufferingEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoPlayer1Buffering(
    sender: WebVideoPlayer,
    event: CustomEvent<WebVideoPlayerBufferingEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { buffering } = event.detail;
    console.log(buffering);
  }
}
```

### OnQualityChange

[WebVideoPlayerQualityEventDetail](https://webrad.atentor.com/docs/types#webvideoplayerqualityeventdetail) in `event.detail` · `requested`, `current`

Signature and example

```ts
import type { WebVideoPlayer, WebVideoPlayerQualityEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoPlayer1QualityChange(
    sender: WebVideoPlayer,
    event: CustomEvent<WebVideoPlayerQualityEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { requested, current } = event.detail;
    console.log(requested, current);
  }
}
```

### OnError

`Error` in `event.detail`

Signature and example

```ts
import type { WebVideoPlayer } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoPlayer1Error(
    sender: WebVideoPlayer,
    event: CustomEvent<Error>,
  ): Promise<void> {
    Message(event.detail.message);
  }
}
```