AngularLynx

    <video>

    Plays a video from a network URL, like a <video>. It's experimental in Lynx 4.1. Attributes set up the player, and its methods start and stop playback: there's no autoplay.

    element-videosrc/app/app.ts

    Usage

    src/app/player.ts
    import { Component, ElementRef, viewChild } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-player',
  imports: [LYNX_ELEMENTS],
  template: `
    <video
      #player
      src="https://example.com/clip.mp4"
      object-fit="cover"
      style="width: 100%; height: 220px;"
    ></video>
    <view (bindtap)="play()"><text>Play</text></view>
  `,
})
export class Player {
  readonly player = viewChild.required('player', { read: ElementRef });

  // <video> has no autoplay: playback starts only through its play method.
  play(): void {
    this.player().nativeElement.invoke?.('play');
  }
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Needs XElement in custom native apps (see Embedding).

    Attributes

    AttributeTypeDefaultDescription
    srcstring—Video URL. Only network URLs work.
    loopbooleanfalseStarts again at the end.
    mutedbooleanfalseMutes the sound.
    volumenumber1iOS and Android. Volume, from 0 to 1.
    speednumber1iOS and Android. Playback rate, from 0.1 to 2.
    object-fit'contain' | 'cover' | 'fill''contain'iOS and Android. How the video fills the element. It's an attribute here, not the CSS property.
    mode'queue' | 'direct' | 'latest''queue'iOS and Android. How method calls run. 'queue' waits for each call to finish before the next, 'direct' runs each at once, and 'latest' keeps only the newest waiting call.
    timeupdate-intervalnumber0.33iOS and Android. Minimum seconds between bindtimeupdate events.

    Plus the common attributes, such as id, class and style.

    Events

    Read the payload from $event.detail (see Handling taps and events).

    EventdetailDescription
    bindfirstframe{ duration: number }The first frame loaded. duration is in seconds.
    bindplaying—Playback started or resumed.
    bindpaused—Playback paused.
    bindstopped—The stop method stopped playback.
    bindtimeupdate{ current: number; duration: number }The playback position changed, in seconds.
    bindbuffering{ buffering: number }The video is buffering. buffering is how far it has loaded, in seconds.
    bindended—Playback reached the end.
    bindlooped—One loop finished, with loop on.
    binderror{ errorCode: number; errorMsg: string }Playback failed.

    Plus the common events, such as bindtap.

    Methods

    These UI methods (Glossary) control playback. Call them with invoke() on the element (see Call element methods), as the Usage example does with play.

    MethodParametersDescription
    play—Starts or resumes playback.
    pause—Pauses playback.
    stop—iOS and Android. Stops playback.
    seek{ position: number }iOS and Android. Jumps to position seconds.

    Platform support

    PlatformSupport
    iOSLynx 4.1 and later.
    AndroidLynx 4.1 and later.
    WebPartial: Lynx lists src, loop, muted, play, pause, and the bindplaying, bindtimeupdate, bindended and binderror events.