VideoPlayer

Standard HLS video playback, synchronized to the shared clock.

Compatible dtypes: video

Purpose

Plays an MPEG-TS HLS stream via hls.js. Bypasses vuer-m3u's own Playlist engine because hls.js is a complete HLS implementation (demux, remux, MSE, ABR) — the two layers would only duplicate work. The clock is the only shared state.

Props

Data Schema

Standard HLS:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXTINF:9.967,
segment-001.ts
#EXTINF:10.000,
segment-002.ts
#EXT-X-ENDLIST

Constraints:

• Segment codecs must be supported by MediaSource Extensions — H.264 + AAC is the safest baseline
• Omit #EXT-X-ENDLIST for live; hls.js handles live playlists natively
• The playlist URL is fetched by hls.js, not by Playlist, so custom decoders / fetchFn on Playlist do not apply here

Usage

import {
  useTimeline,
  ClockProvider,
  TimelineController,
  VideoPlayer,
} from '@vuer-ai/vuer-m3u'

const VIDEO_URL = '/vuer-m3u-demo/video/playlist.m3u8'

export function VideoPlayerDemo() {
  const { clock, state, play, pause, seek, setPlaybackRate, setLoop } = useTimeline()

  return (
    <ClockProvider clock={clock}>
      <VideoPlayer src={VIDEO_URL} className="w-full aspect-video" />
      <TimelineController
        state={state}
        onPlay={play}
        onPause={pause}
        onSeek={seek}
        onSpeedChange={setPlaybackRate}
        onLoopChange={setLoop}
      />
    </ClockProvider>
  )
}

Clock sync

• Duration — the <video> element's durationchange event calls clock.extendDuration(video.duration).
• Playback — clock.on('seek') routes play / pause / seek / rate to the video element.