Live timeline

Chapters and clock time for live streams in Video.js v10, with hls.js.

• Chapters that keep up with the stream. The time slider splits at the SCTE-35 ad breaks the playlist signals, at the programs in a schedule, or both, and each chapter appears as the stream reaches it.
• The time it aired. The clock time from the stream's #EXT-X-PROGRAM-DATE-TIME, in place of the current time and under the pointer.
• A preview from the stream itself. Hover the slider for the frame at that moment, from the stream's I-frame playlist, with videojs-hlsjs-iframe-thumbnail.

Two custom elements, and React components, that fit into Video.js's own skins; the README shows how. The stream here is the channel from Unified Streaming's Remix VOD2Live demo, with its 30-minute DVR window; the demo titles its programs from the channel's playout list.

Settings Settings Quality Quality Audio Audio Speed Speed Captions Captions