#<video>

4.1 experimental XElement

<video> is an experimental element for playing online video resources in Lynx. It supports playback controls through UIMethods and emits playback lifecycle events.

#Usage

#Basic

videosrc/App.tsx

Code

Preview

#Attributes

#src

src?: string;

Video source URL. Only online network URLs are supported.

#loop

// @defaultValue: false
loop?: boolean;

Whether to loop playback.

#volume

// @defaultValue: 1.0
volume?: number;

Playback volume from 0 to 1.

#muted

// @defaultValue: false
muted?: boolean;

Whether the video is muted.

#speed

// @defaultValue: 1.0
speed?: number;

Playback speed from 0.1 to 2.0.

#object-fit

// @defaultValue: 'contain'
'object-fit'?: 'contain' | 'cover' | 'fill';

Video scaling strategy.

#mode

// @defaultValue: 'queue'
mode?: 'queue' | 'direct' | 'latest';

UIMethod execution mode.

#timeupdate-interval

// @defaultValue: 0.33
'timeupdate-interval'?: number;

Minimum interval for bindtimeupdate dispatch, in seconds.

#Events

Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

#bindfirstframe

bindfirstframe = (e: VideoFirstFrameEvent) => {};

Fired when the first video frame has loaded.

#bindplaying

bindplaying = (e: VideoPlayingEvent) => {};

Fired when video playback starts or resumes.

#bindpaused

bindpaused = (e: VideoPausedEvent) => {};

Fired when video playback pauses.

#bindstopped

bindstopped = (e: VideoStoppedEvent) => {};

Fired when video playback is stopped by the stop UIMethod.

#bindtimeupdate

bindtimeupdate = (e: VideoTimeUpdateEvent) => {};

Fired when the playback position updates.

#bindended

bindended = (e: VideoEndedEvent) => {};

Fired when video playback fully ends.

#bindlooped

bindlooped = (e: VideoLoopedEvent) => {};

Fired at the end of each loop iteration.

#binderror

binderror = (e: VideoErrorEvent) => {};

Fired when a video playback error occurs.

#bindbuffering

bindbuffering = (e: VideoBufferingEvent) => {};

Fired while the video is buffering.

#Methods

Frontend can invoke component methods via the SelectorQuery API.

Method callbacks may receive the following response fields:

#play

lynx
  .createSelectorQuery()
  .select('#id')
  .invoke({
    method: 'play',
    success(res) {},
    fail(res) {},
  })
  .exec();

Play the video.

#pause

lynx
  .createSelectorQuery()
  .select('#id')
  .invoke({
    method: 'pause',
    success(res) {},
    fail(res) {},
  })
  .exec();

Pause video playback.

#stop

lynx
  .createSelectorQuery()
  .select('#id')
  .invoke({
    method: 'stop',
    success(res) {},
    fail(res) {},
  })
  .exec();

Stop video playback.

#seek

lynx
  .createSelectorQuery()
  .select('#id')
  .invoke({
    method: 'seek',
    params: {
      position: 2,
    },
    success(res) {},
    fail(res) {},
  })
  .exec();

Seek to the target playback position.

#Compatibility