Interface: Video

View is a base class for all other visual components. All View-derived components have the following properties, methods, and events in addition to their own.

Hierarchy

View

↳ Video

Properties

BackdropBlur

• Optional BackdropBlur: BackdropBlurEffect

Inherited from

View.BackdropBlur

BlendMode

• Optional BlendMode: BlendModeEffect

Inherited from

View.BlendMode

Blur

• Optional Blur: BlurEffect

Inherited from

View.Blur

Brightness

• Optional Brightness: BrightnessEffect

Inherited from

View.Brightness

Contrast

• Optional Contrast: ContrastEffect

Inherited from

View.Contrast

Draggable

• Optional Draggable: DraggableEffect

Inherited from

View.Draggable

Follow

• Optional Follow: FollowEffect

Inherited from

View.Follow

Glow

• Optional Glow: GlowEffect

Inherited from

View.Glow

Grayscale

• Optional Grayscale: GrayscaleEffect

Inherited from

View.Grayscale

HueRotate

• Optional HueRotate: HueRotateEffect

Inherited from

View.HueRotate

Invert

• Optional Invert: InvertEffect

Inherited from

View.Invert

LetterSpacing

• Optional LetterSpacing: LetterSpacingEffect

Inherited from

View.LetterSpacing

LookAt

• Optional LookAt: LookAtEffect

Inherited from

View.LookAt

Oscillate

• Optional Oscillate: OscillateEffect

Inherited from

View.Oscillate

Physics

• Optional Physics: PhysicsEffect

Inherited from

View.Physics

Saturation

• Optional Saturation: SaturationEffect

Inherited from

View.Saturation

Sepia

• Optional Sepia: SepiaEffect

Inherited from

View.Sepia

Shadow

• Optional Shadow: ShadowEffect

Inherited from

View.Shadow

Spin

• Optional Spin: SpinEffect

Inherited from

View.Spin

TextOutline

• Optional TextOutline: TextOutlineEffect

Inherited from

View.TextOutline

Transform

• Optional Transform: TransformEffect

Inherited from

View.Transform

attribution

• attribution: Attribution

autoplay

• autoplay: boolean

Indicates whether playback should automatically begin as soon as enough media is available to do so without interruption.

Default

false

backgroundColor

• backgroundColor: undefined | string

The background color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined background color is transparent.

Example

// Set the background color of the view to a translucent red.
view.backgroundColor = 'rgba(255, 0, 0, 50%)'

Inherited from

View.backgroundColor

color

• color: undefined | string

The foreground or text color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined foreground color is inherited from one of the component's ancestors.

Example

// Set the foreground color of the view to red.
view.color = 'red';

Inherited from

View.color

componentType

• Readonly componentType: string

The component's type. E.g. "View", "Text", "Button", "Page", etc.

Inherited from

View.componentType

controls

• controls: boolean

Indicates whether a UI with controls should be displayed.

Default

false

currentTime

• Optional currentTime: number

The current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline.

Default

duration

• Readonly duration: number

Indicates the total duration in seconds. If no data is available, the returned value is NaN. If the media is of indefinite length (such as streamed live media), the value is +Infinity.

fit

• fit: "none" | "fill" | "contain" | "cover" | "scale-down"

How the video should be resized to fit its container. See: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit (opens in a new tab).

cover -- The video scales up or down to fully cover its box, preserving its aspect ratio. May crop the video. contain -- The video scales up or down to be fully contained in its box, preserving its aspect ratio. May leave empty space above/below or two the sides. fill -- The video fills its box, even if it has to stretch to do so. none -- The video is not resized at all, and is displayed at its original size. scale-down -- The video is scaled down to fully fit within its box, preserving its aspect ratio. It is not scaled up to fit.

Default

'cover'

height

• height: number

The height of the component.

Inherited from

View.height

id

• Readonly id: number

Every Component is assigned a unique numerical id that cannot be changed. Components can be looked up by id using the get function.

Inherited from

View.id

link

• link: undefined | string

The address of the link. Can be a URL to a web page, a 'tel:' phone number, a 'mailto:' email address, or a 'sms:' phone number. Also can be a relative link to a page, "@previous" for the previous page, or "@next" for the next page. If undefined the component is not treated as a link.

Default

undefined

Inherited from

View.link

linkRel

• linkRel: LinkRelType

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel (opens in a new tab)

Inherited from

View.linkRel

linkTarget

• linkTarget: "_blank" | "_self" | "_parent" | "_top"

The target of the link. Can be '_blank' (open in new window or tab), '_self' (replace current page), '_parent' (replace parent if in an iframe), or '_top' (replace top if in an iframe).

Default

'_self'

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target (opens in a new tab)

Inherited from

View.linkTarget

linkTitle

• linkTitle: string

The title of the link displayed on hover. If '' nothing is displayed.

Default

''

Inherited from

View.linkTitle

loaded

• Readonly loaded: boolean

Indicates whether the media is loaded.

Default

false

loop

• loop: boolean

Indicates whether the media should start over when it reaches the end.

Default

false

muted

• muted: boolean

Determines whether audio is muted. true if the audio is muted and false otherwise.

Default

false

name

• name: undefined | string

Every Component can have a user-assigned name. It can be anything and is not guaranteed to be unique. Components can be looked up by name using the get function.

Inherited from

View.name

naturalHeight

• Readonly naturalHeight: number

Indicates the intrinsic height of the video, expressed in CSS pixels. In simple terms, this is the height of the media in its natural size.

naturalWidth

• Readonly naturalWidth: number

Indicates the intrinsic width of the video, expressed in CSS pixels. In simple terms, this is the width of the media in its natural size.

opacity

• opacity: number

The component's opacity, or level of transparency.

1 is fully opaque (not transparent at all), 0.5 is 50% see-through, and 0 is completely transparent.

Inherited from

View.opacity

parent

• Readonly parent: undefined | View

When added to a Container (or a Page, which is a Container), the Container is assigned to the parent property.

Inherited from

View.parent

paused

• Readonly paused: boolean

true is paused and false is not paused.

playbackRate

• playbackRate: number

The default playback rate for the media.

Default

1.0

preload

• preload: boolean

Indicates whether the audio data should be preloaded.

Default

false

rotation

• rotation: number

The component's rotation, in degrees.

Inherited from

View.rotation

scale

• scale: number

The component's scale multiplier.

Inherited from

View.scale

source

• source: undefined | string

Contains the URL of a media resource to use.

style

• style: Partial (opens in a new tab)<CSSStyleDeclaration (opens in a new tab)>

Low-level access to the component's CSS property.

Inherited from

View.style

tabIndex

• tabIndex: undefined | number

Control if or how the component is focused when the tab key is pressed.

0 - The component should be focusable in sequential keyboard navigation, after any positive tabIndex values. a positive value - Should be focusable in sequential keyboard navigation, with the order defined by the value. -1 - Should not be focusable in sequential keyboard navigation, but could be focused programmatically. undefined - the browser decides whether the component is focusable.

Default

undefined

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex (opens in a new tab)

Inherited from

View.tabIndex

visible

• visible: boolean

The component's visibility.

true is visible, false is invisible

Inherited from

View.visible

volume

• volume: number

Indicates the audio volume, from 0 (silent) to 100 (loudest).

Default

width

• width: number

The width of the component.

Inherited from

View.width

x

• x: number

The component's x coordinate.

Inherited from

View.x

y

• y: number

The component's y coordinate.

Inherited from

View.y

Methods

addEffect

▸ addEffect(effect): void

Add an effect to the component.

Parameters

Name	Type
`effect`	`string`

Returns

void

Inherited from

View.addEffect

clone

▸ clone(): Video

Create an exact duplicate of a component.

The clone must be added to a container with appendChild to be visible.

Returns

Video

Example

const clone = view.clone();
clone.x = 100;
clone.y = 100;
view.page.appendChild(clone);

Overrides

View.clone

dispatchEvent

▸ dispatchEvent(event): Promise (opens in a new tab)<void>

Triggers the event listeners for the specified event.

Parameters

Name	Type
`event`	`Event` (opens in a new tab)

Returns

Promise (opens in a new tab)<void>

Inherited from

View.dispatchEvent

focus

▸ focus(options?): void

Parameters

Name	Type
`options?`	`FocusOptions`

Returns

void

Inherited from

View.focus

hasPointerCapture

▸ hasPointerCapture(pointerId): boolean

Parameters

Name	Type
`pointerId`	`number`

Returns

boolean

Inherited from

View.hasPointerCapture

localPointFromClient

▸ localPointFromClient(clientX, clientY): Object

Convert a client viewport position to a position suitable for a View. Useful for converting mouse or touch positions.

Parameters

Name	Type	Description
`clientX`	`number`	The x position in the client viewport.
`clientY`	`number`	The y position in the client viewport.

Returns

Object

an object with x and y properties in the local coordinate system of the component.

Name	Type
`x`	`number`
`y`	`number`

Example

let dragging = false;
let pointerOffset;
this.on("pointerdown", (event) => {
  this.setPointerCapture(event.pointerId);
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(event.clientX, event.clientY)
  pointerOffset = { x: point.x - this.x, y: point.y - this.y };
  dragging = true;
});
 
this.on("pointermove", (ev) => {
if (!dragging)
    return;
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(ev.clientX, ev.clientY);
  this.x = point.x - pointerOffset.x;
  this.y = point.y - pointerOffset.y;
});
 
this.on("pointerup", (event) => {
  this.releasePointerCapture(event.pointerId);
  dragging = false;
});

Inherited from

View.localPointFromClient

on

▸ on<K>(type, listener, options?): () => void

Add an event listener to the component.

Type parameters

Name	Type
`K`	extends keyof `EventHandlersEventMap`

Parameters

Name	Type
`type`	`K`
`listener`	(`event`: `EventHandlersEventMap`[`K`]) => `any`
`options?`	`EventListenerOptions`

Returns

fn

Returns a function that removes the event listener.

▸ (): void

Add an event listener to the component.

Returns

void

Returns a function that removes the event listener.

Inherited from

View.on

pause

▸ pause(): void

Pause the video.

Returns

void

play

▸ play(): void

Play the video.

Returns

void

releasePointerCapture

▸ releasePointerCapture(pointerId): void

Parameters

Name	Type
`pointerId`	`number`

Returns

void

Inherited from

View.releasePointerCapture

remove

▸ remove(): void

Remove the component from its parent.

Returns

void

Example

view.remove();

Inherited from

View.remove

removeEffect

▸ removeEffect(effect): void

Remove an effect to the component.

Parameters

Name	Type
`effect`	`string`

Returns

void

Inherited from

View.removeEffect

setPointerCapture

▸ setPointerCapture(pointerId): void

Parameters

Name	Type
`pointerId`	`number`

Returns

void

Inherited from

View.setPointerCapture

stop

▸ stop(): void

Stop the video.

Returns

void

Events

error

• error: "error"

loadeddata

• loadeddata: "loadeddata"

loadedmetadata

• loadedmetadata: "loadedmetadata"

timeupdate

• timeupdate: "timeupdate"

Transformeffect View