avbridge 2.8.3 → 2.9.0

package/dist/{remux-WBYIZBBX.js → remux-56V7LDAD.js}

@@ -1,10 +1,10 @@
-export { createOutputFormat, generateFilename, mimeForFormat, remux, validateRemuxEligibility } from './chunk-SMH6IOP2.js';
-import './chunk-SR3MPV4D.js';
+export { createOutputFormat, generateFilename, mimeForFormat, remux, validateRemuxEligibility } from './chunk-CL6UEUQF.js';
+import './chunk-GYIJU44C.js';
 import './chunk-CPJLFFCC.js';
 import './chunk-LUFA47FP.js';
-import './chunk-X2K3GIWE.js';
+import './chunk-2NSOOMXW.js';
 import './chunk-DCSOQH2N.js';
 import './chunk-5DMTJVIU.js';
 import './chunk-5YAWWKA3.js';
-//# sourceMappingURL=remux-WBYIZBBX.js.map
-//# sourceMappingURL=remux-WBYIZBBX.js.map
+//# sourceMappingURL=remux-56V7LDAD.js.map
+//# sourceMappingURL=remux-56V7LDAD.js.map

package/dist/{remux-WBYIZBBX.js.map → remux-56V7LDAD.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-WBYIZBBX.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-56V7LDAD.js"}

package/dist/{remux-OBSMIENG.cjs → remux-KUS5GIL6.cjs}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkQ2VUO52Z_cjs = require('./chunk-Q2VUO52Z.cjs');
-require('./chunk-ZCUXHW55.cjs');
+var chunkOTFS7DC4_cjs = require('./chunk-OTFS7DC4.cjs');
+require('./chunk-BYGZN4Z5.cjs');
 require('./chunk-2IJ66NTD.cjs');
 require('./chunk-QDJLQR53.cjs');
-require('./chunk-CPZ7PXAM.cjs');
+require('./chunk-L7A3ECI2.cjs');
 require('./chunk-Z33SBWL5.cjs');
 require('./chunk-G4APZMCP.cjs');
 require('./chunk-F3LQJKXK.cjs');
@@ -13,23 +13,23 @@ require('./chunk-F3LQJKXK.cjs');
 
 Object.defineProperty(exports, "createOutputFormat", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.createOutputFormat; }
+  get: function () { return chunkOTFS7DC4_cjs.createOutputFormat; }
 });
 Object.defineProperty(exports, "generateFilename", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.generateFilename; }
+  get: function () { return chunkOTFS7DC4_cjs.generateFilename; }
 });
 Object.defineProperty(exports, "mimeForFormat", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.mimeForFormat; }
+  get: function () { return chunkOTFS7DC4_cjs.mimeForFormat; }
 });
 Object.defineProperty(exports, "remux", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.remux; }
+  get: function () { return chunkOTFS7DC4_cjs.remux; }
 });
 Object.defineProperty(exports, "validateRemuxEligibility", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.validateRemuxEligibility; }
+  get: function () { return chunkOTFS7DC4_cjs.validateRemuxEligibility; }
 });
-//# sourceMappingURL=remux-OBSMIENG.cjs.map
-//# sourceMappingURL=remux-OBSMIENG.cjs.map
+//# sourceMappingURL=remux-KUS5GIL6.cjs.map
+//# sourceMappingURL=remux-KUS5GIL6.cjs.map

package/dist/{remux-OBSMIENG.cjs.map → remux-KUS5GIL6.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-OBSMIENG.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-KUS5GIL6.cjs"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "avbridge",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "Play and convert arbitrary video files in the browser. Native, remux, hybrid, fallback, and transcode — one API.",
   "license": "MIT",
   "author": "Keishi Hattori",

package/src/classify/rules.ts

@@ -4,6 +4,7 @@ import type {
   Classification,
   ContainerKind,
   MediaContext,
+  StrategyName,
   VideoCodec,
   VideoTrackInfo,
 } from "../types.js";
@@ -30,6 +31,8 @@ export const FALLBACK_VIDEO_CODECS = new Set<VideoCodec>([
   "wmv3", "vc1", "mpeg4",
   "rv10", "rv20", "rv30", "rv40",
   "mpeg2", "mpeg1", "theora",
+  "dv", "hq_hqa",
+  "rawvideo", "qtrle", "png", "vp6f",
 ]);
 export const FALLBACK_AUDIO_CODECS = new Set<AudioCodec>([
   "wmav2", "wmapro", "ac3", "eac3",
@@ -218,10 +221,18 @@ export function classifyContext(ctx: MediaContext): Classification {
         reason: `${ctx.container} container with ${video.codec}${audio ? "/" + audio.codec : ""}; MSE rejects the remux target mime and WebCodecs is unavailable — falling back to WASM decode`,
       };
     }
+    // Give REMUX_CANDIDATE a fallback chain so the runtime stall / decode
+    // supervisors have somewhere to escalate to when MSE lies about codec
+    // support (the Firefox HEVC case — audio plays, video never paints).
+    // The initial pick is still remux; these only engage on stall.
+    const fallbackChain: StrategyName[] = webCodecsAvailable()
+      ? ["hybrid", "fallback"]
+      : ["fallback"];
     return {
       class: "REMUX_CANDIDATE",
       strategy: "remux",
       reason: `${ctx.container} container with native-supported codecs — remux to fragmented MP4 for reliable playback`,
+      fallbackChain,
     };
   }
 

package/src/element/avbridge-player.ts

@@ -167,6 +167,7 @@ export class AvbridgePlayerElement extends HTMLElement {
     <div part="toolbar-top-left" class="avp-toolbar-top-left"><slot name="top-left"></slot></div>
     <div part="toolbar-top-right" class="avp-toolbar-top-right"><slot name="top-right"></slot></div>
   </div>
+  <div part="content-overlay" class="avp-content-overlay"><slot name="content-overlay"></slot></div>
   <div part="overlay" class="avp-overlay">
     <button class="avp-overlay-btn" aria-label="Play">${ICON_PLAY}</button>
     <div class="avp-spinner"></div>
@@ -441,21 +442,25 @@ export class AvbridgePlayerElement extends HTMLElement {
     this._userSeeking = true;
     const seekBar = this.shadowRoot!.querySelector(".avp-seek") as HTMLElement;
     seekBar.setPointerCapture(e.pointerId);
+    seekBar.setAttribute("data-seeking", "");
 
     const initial = this._timeFromSeekPointer(e.clientX);
     this._seekInput.value = String(initial);
     this._onSeekInput();
+    this._updateSeekTooltip(e.clientX);
 
     const onMove = (ev: PointerEvent) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
+      this._updateSeekTooltip(ev.clientX);
     };
     const onUp = (ev: PointerEvent) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekCommit();
-      this._seekInput.focus(); // keep keyboard nav responsive
+      this._seekInput.focus();
+      seekBar.removeAttribute("data-seeking");
       seekBar.removeEventListener("pointermove", onMove);
       seekBar.removeEventListener("pointerup", onUp);
       seekBar.removeEventListener("pointercancel", onUp);
@@ -467,8 +472,12 @@ export class AvbridgePlayerElement extends HTMLElement {
   }
 
   private _onSeekHover(e: PointerEvent): void {
+    this._updateSeekTooltip(e.clientX);
+  }
+
+  private _updateSeekTooltip(clientX: number): void {
     const rect = this._seekInput.getBoundingClientRect();
-    const frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const frac = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
     const t = frac * (this._video.duration || 0);
     this._seekTooltip.textContent = formatTime(t);
     this._seekTooltip.style.left = `${frac * 100}%`;
@@ -727,13 +736,15 @@ export class AvbridgePlayerElement extends HTMLElement {
   /** Track whether the last interaction was touch so click handler can skip. */
   private _lastPointerTypeWasTouch = false;
 
-  /** True if the event's composed path passes through consumer-slotted toolbar
-   *  content. Slotted content lives in the light DOM so `.closest(".avp-toolbar-top")`
-   *  on the event target won't find the shadow-DOM wrapper — `composedPath()`
-   *  does. */
-  private _isToolbarEvent(e: Event): boolean {
+  /** True if the event's composed path passes through consumer-slotted
+   *  content (toolbar or content-overlay). Slotted content lives in the
+   *  light DOM so `.closest(".avp-toolbar-top")` on the event target won't
+   *  find the shadow-DOM wrapper — `composedPath()` does. */
+  private _isSlottedContentEvent(e: Event): boolean {
     for (const node of e.composedPath()) {
-      if (node instanceof HTMLElement && node.classList.contains("avp-toolbar-top")) return true;
+      if (node instanceof HTMLElement &&
+        (node.classList.contains("avp-toolbar-top") ||
+         node.classList.contains("avp-content-overlay"))) return true;
     }
     return false;
   }
@@ -741,7 +752,7 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _onContainerClick(e: MouseEvent): void {
     // Ignore clicks on controls
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
 
     // Touch taps are handled by _onPointerUp (show/hide controls + double-tap).
     // The browser fires a synthetic click after touchend — skip it.
@@ -760,7 +771,7 @@ export class AvbridgePlayerElement extends HTMLElement {
 
   private _onContainerDblClick(e: MouseEvent): void {
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
     // Cancel the pending single-click play/pause
     if (this._tapTimer) { clearTimeout(this._tapTimer); this._tapTimer = null; }
     this._toggleFullscreen();
@@ -786,7 +797,7 @@ export class AvbridgePlayerElement extends HTMLElement {
 
     // Ignore touches on controls — buttons have their own handlers
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
 
     // Double-tap detection
     const now = Date.now();

package/src/element/avbridge-video.ts

@@ -598,10 +598,21 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
   }
 
   get muted(): boolean {
-    return this.hasAttribute("muted");
+    // Read through to the inner <video>'s IDL property — on canvas
+    // strategies the property is patched via Object.defineProperty to
+    // mirror AudioOutput state, and consumers need the truthful value.
+    return this._videoEl.muted;
   }
 
   set muted(value: boolean) {
+    // Drive the IDL property (fires volumechange per HTML spec) rather
+    // than toggling the attribute (which on most browsers is parse-time
+    // only and does NOT fire volumechange when toggled runtime). On
+    // canvas strategies, the property is patched via Object.defineProperty
+    // which also dispatches volumechange; one code path, both worlds.
+    this._videoEl.muted = value;
+    // Keep the attribute in sync so CSS selectors like [muted] and
+    // re-queries via getAttribute reflect current state.
     if (value) this.setAttribute("muted", "");
     else this.removeAttribute("muted");
   }
@@ -683,11 +694,16 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
 
   /**
    * Buffered time ranges for the active source. Mirrors the standard
-   * `<video>.buffered` `TimeRanges` API. For the native and remux strategies
-   * this reflects the underlying SourceBuffer / progressive download state.
-   * For the hybrid and fallback (canvas-rendered) strategies it currently
-   * returns an empty TimeRanges; a future release will synthesize a coarse
-   * range from the decoder's read position.
+   * `<video>.buffered` `TimeRanges` API.
+   *
+   * - **Native / remux:** pass-through to the real `<video>.buffered`
+   *   (reflects the browser's SourceBuffer / progressive-download state).
+   * - **Hybrid / fallback:** a single `[0, frontier]` range synthesized
+   *   from the demuxer's read progress — "how far libav has ever pumped
+   *   packets through." Monotonic; does not shrink on seek. This is an
+   *   approximation, not MSE-fidelity: decoded frames on canvas strategies
+   *   are consumed in flight, so we can't report per-range availability
+   *   the way MSE does. Enough for a seek-bar buffered indicator.
    */
   get buffered(): TimeRanges {
     return this._videoEl.buffered;

package/src/element/player-styles.ts

@@ -25,11 +25,18 @@ export const PLAYER_STYLES = /* css */ `
 
 /* ── Container ────────────────────────────────────────────────────────── */
 
+:host {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+
 .avp {
   position: relative;
   width: 100%;
   height: 100%;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
 }
 
 .avp avbridge-video {
@@ -228,7 +235,14 @@ export const PLAYER_STYLES = /* css */ `
   pointer-events: auto;
 }
 
-.avp-toolbar-top-right { margin-left: auto; }
+/* Left slot fills remaining space so slotted text/content can grow.
+   min-width: 0 prevents flex children from overflowing the toolbar. */
+.avp-toolbar-top-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.avp-toolbar-top-right { margin-left: auto; flex-shrink: 0; }
 
 /* Hide the gradient band when no consumer has slotted anything — we
    toggle data-toolbar-empty from JS via slotchange. */
@@ -241,6 +255,30 @@ export const PLAYER_STYLES = /* css */ `
   pointer-events: none;
 }
 
+/* ── Content overlay ─────────────────────────────────────────────────── */
+/* Consumer-provided rich content (tweet cards, media info, annotations).
+   Sits above the video, below the play-button overlay and controls in
+   z-order. Auto-hides with the chrome. The wrapper is pointer-events:none
+   so taps fall through to the video; consumers opt in on their content
+   with pointer-events:auto. */
+
+.avp-content-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+.avp-content-overlay ::slotted(*) {
+  pointer-events: auto;
+}
+
+:host([data-controls-hidden]) .avp-content-overlay {
+  opacity: 0;
+}
+
 /* ── Seek bar ─────────────────────────────────────────────────────────── */
 
 .avp-seek {
@@ -327,6 +365,15 @@ export const PLAYER_STYLES = /* css */ `
 
 .avp-seek:hover .avp-seek-tooltip { display: block; }
 
+/* Show tooltip during active drag (touch or mouse). The JS side sets
+   data-seeking on .avp-seek while the user is scrubbing. */
+.avp-seek[data-seeking] .avp-seek-tooltip { display: block; }
+
+/* Enlarge thumb while scrubbing. */
+.avp-seek[data-seeking] .avp-seek-thumb {
+  transform: translate(-50%, -50%) scale(1.4);
+}
+
 /* ── Bottom row ───────────────────────────────────────────────────────── */
 
 .avp-bottom {
@@ -446,7 +493,10 @@ export const PLAYER_STYLES = /* css */ `
   background: rgba(28, 28, 28, 0.95);
   border-radius: 8px;
   min-width: 220px;
-  max-height: 300px;
+  /* Fit within the player: leave room for the controls bar (52px bottom)
+     and a small top margin (8px). On tall players this caps at 300px;
+     on short players it shrinks to whatever fits. */
+  max-height: min(300px, calc(100% - 52px - 8px));
   overflow-y: auto;
   display: none;
   z-index: 10;
@@ -518,9 +568,24 @@ export const PLAYER_STYLES = /* css */ `
 @media (pointer: coarse) {
   .avp-btn svg { width: 28px; height: 28px; }
   .avp-btn { padding: 8px; }
+
+  /* Taller touch target on mobile (44px, matching YouTube Mobile)
+     while keeping the visual track thin. Negative margin collapses
+     the extra space so the controls layout doesn't shift. */
+  .avp-seek { height: 44px; margin-top: -12px; margin-bottom: -12px; }
   .avp-seek-track { height: 4px; }
   .avp-seek:hover .avp-seek-track { height: 4px; }
-  .avp-seek-thumb { transform: translate(-50%, -50%) scale(1); }
+  .avp-seek-thumb {
+    transform: translate(-50%, -50%) scale(1);
+    width: 16px;
+    height: 16px;
+  }
+  .avp-seek[data-seeking] .avp-seek-thumb {
+    transform: translate(-50%, -50%) scale(1.5);
+  }
+  /* Move tooltip above the taller touch zone. */
+  .avp-seek-tooltip { bottom: 32px; }
+
   .avp-volume:hover .avp-volume-slider { width: 0; }
   .avp-overlay-btn { width: 56px; height: 56px; }
   .avp-overlay-btn svg { width: 30px; height: 30px; }

package/src/player.ts

@@ -20,6 +20,62 @@ import type {
 } from "./types.js";
 import { AvbridgeError, ERR_PLAYER_NOT_READY, ERR_ALL_STRATEGIES_EXHAUSTED } from "./errors.js";
 
+/**
+ * Decoded-video-frame counter reader. Prefers the standard
+ * `getVideoPlaybackQuality().totalVideoFrames` (all evergreen browsers);
+ * falls back to the WebKit-prefixed `webkitDecodedFrameCount` for older
+ * Safari. Returns 0 for non-video elements or when nothing exposes the
+ * count — the caller treats 0 as "no signal" (constant across samples,
+ * which is fine).
+ */
+export function readDecodedFrameCount(target: HTMLMediaElement): number {
+  if (typeof HTMLVideoElement === "undefined" || !(target instanceof HTMLVideoElement)) return 0;
+  const vq = (target as HTMLVideoElement & { getVideoPlaybackQuality?: () => { totalVideoFrames: number } }).getVideoPlaybackQuality;
+  if (typeof vq === "function") {
+    try { return vq.call(target).totalVideoFrames; } catch { /* fall through */ }
+  }
+  const legacy = (target as HTMLVideoElement & { webkitDecodedFrameCount?: number }).webkitDecodedFrameCount;
+  return typeof legacy === "number" ? legacy : 0;
+}
+
+/**
+ * Pure decision function for the stall supervisor. Takes a snapshot of
+ * the observable state and returns whether to escalate. Extracted so it
+ * can be unit-tested without spinning up a real player / media element.
+ *
+ * - `time-stall`: `currentTime` hasn't moved for `timeStallThresholdMs`
+ *   despite the element being in a state where it should be playing.
+ * - `silent-video`: the media has a video track, `currentTime` is
+ *   advancing (audio is playing), but the decoder has produced no new
+ *   frames for `frameStallThresholdMs`. Catches Firefox-style "MSE
+ *   reports codec supported but the decoder can't actually decode it".
+ */
+export function evaluateDecodeHealth(input: {
+  hasVideoTrack: boolean;
+  timeAdvanced: boolean;
+  framesAdvanced: boolean;
+  now: number;
+  lastProgressTime: number;
+  lastFrameProgressTime: number;
+  timeStallThresholdMs?: number;
+  frameStallThresholdMs?: number;
+}): { escalate: false } | { escalate: true; kind: "time-stall" | "silent-video" } {
+  const timeThreshold = input.timeStallThresholdMs ?? 5000;
+  const frameThreshold = input.frameStallThresholdMs ?? 3000;
+  if (!input.timeAdvanced && input.now - input.lastProgressTime > timeThreshold) {
+    return { escalate: true, kind: "time-stall" };
+  }
+  if (
+    input.hasVideoTrack &&
+    input.timeAdvanced &&
+    !input.framesAdvanced &&
+    input.now - input.lastFrameProgressTime > frameThreshold
+  ) {
+    return { escalate: true, kind: "silent-video" };
+  }
+  return { escalate: false };
+}
+
 export class UnifiedPlayer {
   private emitter = new TypedEmitter<PlayerEventMap>();
   private session: PlaybackSession | null = null;
@@ -34,6 +90,13 @@ export class UnifiedPlayer {
   private stallTimer: ReturnType<typeof setInterval> | null = null;
   private lastProgressTime = 0;
   private lastProgressPosition = -1;
+  /** Last observed `HTMLVideoElement.getVideoPlaybackQuality().totalVideoFrames`
+   *  (or `webkitDecodedFrameCount` fallback). Used by the silent-video
+   *  watchdog — catches cases where `currentTime` advances (audio plays)
+   *  but the decoder produces no frames, e.g. Firefox claiming `hev1.*`
+   *  via MSE when the decoder actually can't decode HEVC. */
+  private lastVideoFrameCount = 0;
+  private lastVideoFrameProgressTime = 0;
   private errorListener: (() => void) | null = null;
 
   // Bound so we can removeEventListener in destroy(); without this the
@@ -351,23 +414,48 @@ export class UnifiedPlayer {
       // Monitor currentTime progress
       this.lastProgressPosition = this.options.target.currentTime;
       this.lastProgressTime = performance.now();
+      this.lastVideoFrameCount = readDecodedFrameCount(this.options.target);
+      this.lastVideoFrameProgressTime = performance.now();
+
+      const hasVideoTrack = (this.mediaContext?.videoTracks.length ?? 0) > 0;
 
       this.stallTimer = setInterval(() => {
         const t = this.options.target;
+        const now = performance.now();
         if (t.paused || t.ended || t.readyState < 2) {
           this.lastProgressPosition = t.currentTime;
-          this.lastProgressTime = performance.now();
+          this.lastProgressTime = now;
+          this.lastVideoFrameCount = readDecodedFrameCount(t);
+          this.lastVideoFrameProgressTime = now;
           return;
         }
-        if (t.currentTime !== this.lastProgressPosition) {
+        const timeAdvanced = t.currentTime !== this.lastProgressPosition;
+        const frames = readDecodedFrameCount(t);
+        const framesAdvanced = frames > this.lastVideoFrameCount;
+
+        const health = evaluateDecodeHealth({
+          hasVideoTrack,
+          timeAdvanced,
+          framesAdvanced,
+          now,
+          lastProgressTime: this.lastProgressTime,
+          lastFrameProgressTime: this.lastVideoFrameProgressTime,
+        });
+
+        if (timeAdvanced) {
           this.lastProgressPosition = t.currentTime;
-          this.lastProgressTime = performance.now();
-          return;
+          this.lastProgressTime = now;
         }
-        if (performance.now() - this.lastProgressTime > 5000) {
-          void this.escalate(
-            `${strategy} strategy stalled for 5s at ${t.currentTime.toFixed(1)}s`,
-          );
+        if (framesAdvanced) {
+          this.lastVideoFrameCount = frames;
+          this.lastVideoFrameProgressTime = now;
+        }
+
+        if (health.escalate) {
+          const reason = health.kind === "time-stall"
+            ? `${strategy} strategy stalled for 5s at ${t.currentTime.toFixed(1)}s`
+            : `${strategy} strategy: audio is advancing but the video decoder has produced no new frames for 3s — likely a silent codec failure`;
+          void this.escalate(reason);
         }
       }, 1000);
 

package/src/probe/avi.ts

@@ -181,6 +181,8 @@ function ffmpegToAvbridgeVideo(name: string): VideoCodec {
     case "rv20":   return "rv20";
     case "rv30":   return "rv30";
     case "rv40":   return "rv40";
+    case "dvvideo": return "dv";       // DV / DVCPRO (camcorder, MiniDV)
+    case "hq_hqa": return "hq_hqa";    // Canopus HQ / HQA (Grass Valley)
     default:       return name as VideoCodec;
   }
 }

package/src/strategies/fallback/decoder.ts

@@ -32,6 +32,7 @@ import { dbg } from "../../util/debug.js";
 import {
   sanitizeFrameTimestamp,
   libavFrameToInterleavedFloat32,
+  packetPtsSec,
 } from "../../util/libav-demux.js";
 
 export interface DecoderHandles {
@@ -46,6 +47,13 @@ export interface DecoderHandles {
    */
   setAudioTrack(trackId: number, timeSec: number): Promise<void>;
   stats(): Record<string, unknown>;
+  /**
+   * The demuxer's read-ahead frontier in seconds. See
+   * `HybridDecoderHandles.bufferedUntilSec` for the full contract —
+   * same semantics, same consumer (`<video>.buffered` on canvas
+   * strategies).
+   */
+  bufferedUntilSec(): number;
 }
 
 export interface StartDecoderOptions {
@@ -222,6 +230,7 @@ export async function startDecoder(opts: StartDecoderOptions): Promise<DecoderHa
 
   let packetsRead = 0;
   let videoFramesDecoded = 0;
+  let bufferedUntilSec = 0;
   let audioFramesDecoded = 0;
 
   // Decode-rate watchdog. Samples framesDecoded every second and
@@ -278,6 +287,23 @@ export async function startDecoder(opts: StartDecoderOptions): Promise<DecoderHa
       const videoPackets = videoStream ? packets[videoStream.index] : undefined;
       const audioPackets = audioStream ? packets[audioStream.index] : undefined;
 
+      // Track demuxer read-ahead for <video>.buffered on this strategy.
+      // Peek raw pts before sanitizePacketTimestamp (which would
+      // clobber to µs and lose the source-native scale). Monotonic;
+      // seeks don't reset.
+      if (videoPackets && videoTimeBase) {
+        for (const pkt of videoPackets) {
+          const sec = packetPtsSec(pkt, videoTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
+      if (audioPackets && audioTimeBase) {
+        for (const pkt of audioPackets) {
+          const sec = packetPtsSec(pkt, audioTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
+
       // Decode audio BEFORE video. On software-decode-bound content
       // (rv40/mpeg4/wmv3 @ 720p+) a single video batch can take
       // 200-400 ms of wall time; if the scheduler hasn't been fed
@@ -617,6 +643,10 @@ export async function startDecoder(opts: StartDecoderOptions): Promise<DecoderHa
       );
     },
 
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
+
     stats() {
       return {
         decoderType: "libav-wasm",

package/src/strategies/fallback/index.ts

@@ -152,6 +152,18 @@ export async function createFallbackSession(
       ? [[0, ctx.duration]]
       : []),
   });
+  // buffered: demuxer's read-ahead frontier (highest pts pumped from
+  // libav). Single [0, end] range — approximation of "how far we've
+  // read through the source," the signal the seek-bar buffered
+  // indicator wants. Real MSE-style per-range tracking isn't
+  // meaningful here since decoded frames are consumed in flight.
+  Object.defineProperty(target, "buffered", {
+    configurable: true,
+    get: () => {
+      const end = handles.bufferedUntilSec();
+      return makeTimeRanges(end > 0 ? [[0, end]] : []);
+    },
+  });
 
   /**
    * Wait until the decoder has produced enough buffered output to start
@@ -240,6 +252,11 @@ export async function createFallbackSession(
 
   async function doSeek(timeSec: number): Promise<void> {
     const wasPlaying = audio.isPlaying();
+    // HTMLMediaElement contract: dispatch `seeking` once the seek
+    // operation begins. The inner <video> never fires this itself on
+    // canvas strategies (no src), so we dispatch manually to preserve
+    // the contract for consumers listening via `<avbridge-video>`.
+    target.dispatchEvent(new Event("seeking"));
     // 1. Stop audio (suspend ctx + capture media time).
     await audio.pause().catch(() => {});
     // 2. Tell the decoder to cancel its pump and seek the demuxer.
@@ -256,8 +273,21 @@ export async function createFallbackSession(
       await waitForBuffer();
       await audio.start();
     }
+    // HTMLMediaElement contract: dispatch `seeked` after the seek has
+    // completed (demuxer + renderer reset + optional buffer refill).
+    target.dispatchEvent(new Event("seeked"));
   }
 
+  // HTMLMediaElement contract: dispatch `loadedmetadata` once the
+  // session is ready (duration, dimensions, tracks known via the
+  // MediaContext). Dispatched on a microtask so it lands after the
+  // session promise resolves and consumers have a chance to attach
+  // listeners. The inner <video> never fires this itself here — it
+  // has no src.
+  queueMicrotask(() => {
+    try { target.dispatchEvent(new Event("loadedmetadata")); } catch { /* element torn down */ }
+  });
+
   return {
     strategy: "fallback",