Member Junction
    Preparing search index...

    mj-media-player — a generic, framework-agnostic media player.

    Renders one or many audio/video tracks with a custom transport bar (play/pause, click-and-drag scrubber, skip ±N, playback-rate menu, volume + mute, fullscreen), a real audio waveform (decoded client-side, or supplied precomputed via MediaTrack.Peaks) that doubles as the scrubber, and an optional time-synced transcript panel whose cues are clickable and auto-highlight as playback advances.

    This component has ZERO MemberJunction-core dependencies — it is pure Angular and is safe to reuse in any application. The MJStorage binding lives in the separate mj-storage-media-player wrapper.

    Implements

    • OnDestroy
    Index

    Constructors

    Properties

    Accessors

    Methods

    Constructors

    Properties

    AfterPause: EventEmitter<void> = ...
    AfterPlay: EventEmitter<void> = ...
    AfterRateChange: EventEmitter<number> = ...
    AfterSeek: EventEmitter<number> = ...
    Autoplay: boolean = false

    Begin playback automatically once media is ready.

    BeforePause: EventEmitter<MediaPlayerCancelableEvent> = ...
    BeforePlay: EventEmitter<MediaPlayerCancelableEvent> = ...
    BeforeRateChange: EventEmitter<MediaRateEvent> = ...
    BeforeSeek: EventEmitter<MediaSeekEvent> = ...
    CueActivated: EventEmitter<MediaCueEvent> = ...
    CueClicked: EventEmitter<MediaCueEvent> = ...
    DurationChange: EventEmitter<number> = ...
    Ended: EventEmitter<void> = ...
    InitialRate: number = 1

    The initial playback rate.

    InitialVolume: number = 1

    The initial volume (0..1).

    PlaybackRates: number[] = ...

    The playback rates offered in the rate menu.

    primaryMedia?: ElementRef<HTMLMediaElement>

    The primary media element (the single audio/video, or the first video in a grid).

    ShowFullscreen: boolean = true

    Whether the fullscreen button is shown for video.

    ShowSkipControls: boolean = true

    Whether the ±skip buttons are shown.

    ShowSpeedControl: boolean = true

    Whether the playback-rate menu is shown.

    ShowTranscript: boolean = true

    Whether the transcript panel is shown (when a transcript is provided).

    ShowTranscriptToggle: boolean = true

    Whether the transcript show/hide toggle button renders in the transport bar.

    ShowVolume: boolean = true

    Whether the volume slider + mute are shown.

    ShowWaveform: boolean = true

    Whether the real audio waveform (which doubles as the scrubber) is shown for audio-only tracks. On by default. When a track supplies MediaTrack.Peaks those are rendered directly; otherwise the player decodes the track URL client-side to extract real peaks, falling back to a plain progress bar if decoding fails.

    SkipSeconds: number = 30

    Number of seconds the skip buttons jump.

    StartAtMs: number | null = null

    Start playback at this position (ms) once metadata loads.

    StateChanged: EventEmitter<MediaPlaybackState> = ...

    Emits whenever the primary element's MediaPlaybackState transitions.

    TimeUpdate: EventEmitter<number> = ...
    TranscriptPosition: TranscriptPosition = 'bottom'

    Where the transcript panel sits relative to the media. Defaults to 'bottom' (full width below the player, filling remaining height) which reads better than the narrower side layout; consumers can opt into 'side'.

    TranscriptVisibilityChanged: EventEmitter<boolean> = ...

    Emits the new visibility (true = shown) whenever the transcript is toggled.

    WaveformBarCount: number = DEFAULT_WAVEFORM_BARS

    Number of bars the waveform renders / downsamples to.

    Accessors

    • get ShowWaveformBars(): boolean

      True when the waveform should render as bars — i.e. it's enabled, the active track is audio, and we have peaks (supplied or successfully decoded) for it. When false (decode pending/failed, no track), the template shows a plain progress bar instead.

      Returns boolean

    • get WaveformPeaks(): number[] | null

      The normalized 0..1 peaks for the active audio track, or null when none are available yet (still decoding) or decoding failed. Reading this lazily kicks off client-side extraction when needed — re-renders/seeks never re-decode (cached by Id).

      Returns number[] | null

    Methods