WEBRAD / TECHNICAL REFERENCE

Video Player

Play RestGO videos and HLS/DASH manifests.

WebVideoPlayerStandardVisual8 events

Quick start

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

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' }).

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

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 sizeFit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemHeight`Responsive height · Responsive sizeFit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits.	`enumfixed` `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 sizeAllows 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 sizeCross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior.	`enumauto` `start` `center` `end` `stretch`	`"auto"`	Inspector / configuration
`itemHorizontalAnchor`Horizontal anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemVerticalAnchor`Vertical anchor · Anchors & offsets	`enumstart` `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 · SpacingOuter spacing on all four sides, in pixels. Row and column layouts include this spacing between components.	`number`	`0`	margin
`marginTop`Margin top · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginTop
`marginRight`Margin right · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginRight
`marginBottom`Margin bottom · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginBottom
`marginLeft`Margin left · SpacingOuter 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 · BehaviorRemoves 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 · VideoKeep a fixed ratio by calculating height from the responsive width. none uses the saved height rules.	`enumnone` `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	`enumcontain` `cover` `fill` `none` `scale-down`	`"contain"`	objectFit
`quality`Initial quality · VideoManual qualities are discovered from the loaded video. Use the playback quality menu or SetQuality().	`enumauto`	`"auto"`	quality
`poster`Poster · AppearanceOptional poster URL. RestGo thumbnails are fetched with the current access policy.	`string`	`""`	poster
`currentRowBindings`Current row · DataBind 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

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

Example

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

`LoadUrl`

method

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

Example

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

`Play`

method

Play(): Promise<void>;

Example

await VideoPlayer1.Play();

`Pause`

method

Pause(): void;

Example

VideoPlayer1.Pause();

`Stop`

method

Stop(): void;

Example

VideoPlayer1.Stop();

`Seek`

method

Seek(seconds: number): void;

Example

VideoPlayer1.Seek(10);

`SetQuality`

method

SetQuality(value: WebVideoPlayerQuality): void;

Example

VideoPlayer1.SetQuality('auto');

`Unload`

method

Unload(): Promise<void>;

Example

await VideoPlayer1.Unload();

`dispose`

method

dispose(): void;

Example

// 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

focus(options?: FocusOptions): void;

`show`

method

show(): void;

`hide`

method

hide(): void;

`bindEvent`

method

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

`emit`

method

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

Events

Link methods in Interaction. How to use events.

OnLoaded

WebVideoPlayerLoadedEventDetail in event.detail · source, duration, availableQualities

Signature and example

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 in event.detail · currentTime, duration

Signature and example

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 in event.detail · currentTime, duration

Signature and example

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 in event.detail · currentTime, duration

Signature and example

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 in event.detail · currentTime, duration

Signature and example

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 in event.detail · buffering

Signature and example

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 in event.detail · requested, current

Signature and example

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

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);
  }
}