avbridge 2.12.0 → 2.13.0

package/dist/{remux-VPKCLHHM.cjs → remux-NSBJFMLG.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkGJBNLPGI_cjs = require('./chunk-GJBNLPGI.cjs');
-require('./chunk-HBHSUGNI.cjs');
+var chunkE5MAM2P4_cjs = require('./chunk-E5MAM2P4.cjs');
+require('./chunk-VLI3Y6IJ.cjs');
 require('./chunk-2IJ66NTD.cjs');
 require('./chunk-QDJLQR53.cjs');
 require('./chunk-HZUVMXBN.cjs');
@@ -13,23 +13,23 @@ require('./chunk-F3LQJKXK.cjs');
 
 Object.defineProperty(exports, "createOutputFormat", {
   enumerable: true,
-  get: function () { return chunkGJBNLPGI_cjs.createOutputFormat; }
+  get: function () { return chunkE5MAM2P4_cjs.createOutputFormat; }
 });
 Object.defineProperty(exports, "generateFilename", {
   enumerable: true,
-  get: function () { return chunkGJBNLPGI_cjs.generateFilename; }
+  get: function () { return chunkE5MAM2P4_cjs.generateFilename; }
 });
 Object.defineProperty(exports, "mimeForFormat", {
   enumerable: true,
-  get: function () { return chunkGJBNLPGI_cjs.mimeForFormat; }
+  get: function () { return chunkE5MAM2P4_cjs.mimeForFormat; }
 });
 Object.defineProperty(exports, "remux", {
   enumerable: true,
-  get: function () { return chunkGJBNLPGI_cjs.remux; }
+  get: function () { return chunkE5MAM2P4_cjs.remux; }
 });
 Object.defineProperty(exports, "validateRemuxEligibility", {
   enumerable: true,
-  get: function () { return chunkGJBNLPGI_cjs.validateRemuxEligibility; }
+  get: function () { return chunkE5MAM2P4_cjs.validateRemuxEligibility; }
 });
-//# sourceMappingURL=remux-VPKCLHHM.cjs.map
-//# sourceMappingURL=remux-VPKCLHHM.cjs.map
+//# sourceMappingURL=remux-NSBJFMLG.cjs.map
+//# sourceMappingURL=remux-NSBJFMLG.cjs.map

package/dist/{remux-VPKCLHHM.cjs.map → remux-NSBJFMLG.cjs.map}

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

package/dist/{remux-7TA4FKTY.js → remux-PHUHO3VV.js}

@@ -1,10 +1,10 @@
-export { createOutputFormat, generateFilename, mimeForFormat, remux, validateRemuxEligibility } from './chunk-5Y5BTB5D.js';
-import './chunk-2LNXMGT6.js';
+export { createOutputFormat, generateFilename, mimeForFormat, remux, validateRemuxEligibility } from './chunk-B76QWPFM.js';
+import './chunk-5CX7BVVV.js';
 import './chunk-CPJLFFCC.js';
 import './chunk-LUFA47FP.js';
 import './chunk-3YKWU4FM.js';
 import './chunk-3AI5WFFN.js';
 import './chunk-5DMTJVIU.js';
 import './chunk-5YAWWKA3.js';
-//# sourceMappingURL=remux-7TA4FKTY.js.map
-//# sourceMappingURL=remux-7TA4FKTY.js.map
+//# sourceMappingURL=remux-PHUHO3VV.js.map
+//# sourceMappingURL=remux-PHUHO3VV.js.map

package/dist/{remux-7TA4FKTY.js.map → remux-PHUHO3VV.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-7TA4FKTY.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-PHUHO3VV.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "avbridge",
-  "version": "2.12.0",
+  "version": "2.13.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/element/avbridge-player.ts

@@ -72,6 +72,44 @@ type FitMode = (typeof FIT_MODES)[number];
 export class AvbridgePlayerElement extends HTMLElement {
   static readonly observedAttributes = [...PROXY_ATTRIBUTES, ...PLAYER_ATTRIBUTES];
 
+  /**
+   * Returns `true` if a DOM event originated from one of the player's
+   * **interactive chrome elements** (seek bar, control buttons, settings
+   * menu, overlay play button) rather than the bare video surface.
+   *
+   * This is the escape hatch for host pages that wrap the player in a
+   * gesture recognizer (e.g. TikTok-style vertical-swipe pager). For
+   * bubble-phase listeners the player's own handlers already call
+   * `stopPropagation()` on chrome interactions — but **capture-phase**
+   * listeners run *before* the player's handlers, so they need to check
+   * the event's path themselves and bail. This helper does that check
+   * via `composedPath()`, which traverses shadow boundaries correctly.
+   *
+   * Returns `false` for events on the bare video surface — host pages
+   * remain free to claim those for their own gestures (e.g. swipe-to-pan
+   * to the next video). Returns `false` for events that never hit a
+   * player at all.
+   *
+   * @example
+   * // TikTok-style vertical swipe on the document, capture phase:
+   * document.addEventListener("pointerdown", (e) => {
+   *   if (AvbridgePlayerElement.isPlayerChromeEvent(e)) return;
+   *   startSwipeGesture(e);
+   * }, { capture: true });
+   */
+  static isPlayerChromeEvent(event: Event): boolean {
+    // Mirrors the selector used by the player's internal tap-target
+    // gate (see `_onPlayerSurfaceClick` and friends): anything inside
+    // these regions is "chrome", everything else is the bare video.
+    const CHROME_SELECTOR = ".avp-controls, .avp-settings, .avp-overlay-btn";
+    for (const node of event.composedPath()) {
+      if (node instanceof HTMLElement && node.matches?.(CHROME_SELECTOR)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   // ── Internal DOM refs ──────────────────────────────────────────────────
 
   private _video!: AvbridgeVideoElement;
@@ -104,6 +142,11 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _activeAudioTrackId: number | null = null;
   private _activeSubtitleTrackId: number | null = null;
   private _userSeeking = false;
+  /** Last seek target the user committed. The thumb stays here (and
+   *  `_updateTime` skips updating from `timeupdate`) until the underlying
+   *  `currentTime` actually catches up — otherwise the thumb visibly snaps
+   *  back to the pre-seek position while the remux pipeline rebuilds. */
+  private _pendingSeekTarget: number | null = null;
   private _holdTimer: ReturnType<typeof setTimeout> | null = null;
   private _holdSpeedActive = false;
   private _savedPlaybackRate = 1;
@@ -233,7 +276,10 @@ export class AvbridgePlayerElement extends HTMLElement {
     }
 
     // State tracking
-    on(this._video, "loadstart", () => this._setState("loading"));
+    on(this._video, "loadstart", () => {
+      this._pendingSeekTarget = null;
+      this._setState("loading");
+    });
     on(this._video, "ready", () => {
       this._setState(this._video.paused ? "paused" : "playing");
       this._seekInput.max = String(this._video.duration || 0);
@@ -430,7 +476,9 @@ export class AvbridgePlayerElement extends HTMLElement {
   }
 
   private _onSeekCommit(): void {
-    this._video.currentTime = Number(this._seekInput.value);
+    const target = Number(this._seekInput.value);
+    this._pendingSeekTarget = target;
+    this._video.currentTime = target;
     this._userSeeking = false;
   }
 
@@ -442,49 +490,87 @@ export class AvbridgePlayerElement extends HTMLElement {
     return frac * (this._video.duration || 0);
   }
 
-  /** Seekbar width below which drag-to-scrub seeks in real-time (vs
-   *  preview-only). On narrow bars precise positioning is hard, so
-   *  immediate video feedback is more useful than a time tooltip. */
-  private static readonly SCRUB_WIDTH_THRESHOLD = 400;
-
   private _onSeekPointerDown(e: PointerEvent): void {
     // Ignore synthetic clicks originating from the input's own handling
     if (e.button !== 0 && e.pointerType === "mouse") return;
     e.preventDefault();
+    // Consume the event so host pages can layer the player inside a
+    // swipe-driven UI (e.g. TikTok-style vertical pager) without the
+    // pointerdown bubbling out and latching their gesture recognizer.
+    // The seekbar's CSS sets `touch-action: none` to suppress native
+    // browser pan/zoom — this complements that on the JS side, since
+    // swipe handlers built on PointerEvents wouldn't honor touch-action.
+    e.stopPropagation();
     this._userSeeking = true;
     const seekBar = this.shadowRoot!.querySelector(".avp-seek") as HTMLElement;
     seekBar.setPointerCapture(e.pointerId);
     seekBar.setAttribute("data-seeking", "");
 
-    // Decide scrub mode based on physical width.
-    const scrubMode = seekBar.getBoundingClientRect().width < AvbridgePlayerElement.SCRUB_WIDTH_THRESHOLD;
-    let lastScrubCommit = 0;
+    // Two seek modes, picked by `(pointer: coarse)`:
+    //   - **fine** (mouse / trackpad / stylus): absolute mapping —
+    //     pointer X maps directly to seek time, thumb jumps under
+    //     cursor. Standard desktop YouTube behavior.
+    //   - **coarse** (touch): relative drag — initial tap doesn't move
+    //     the thumb; finger Δx maps to a Δt added to the time at
+    //     pointerdown. Standard YouTube-mobile behavior; matters because
+    //     finger positioning is too imprecise for absolute on a small bar.
+    // Both modes commit live during drag (throttled to ~4 Hz so we don't
+    // overwhelm the seek pipeline — every commit restarts the decoder
+    // pump on canvas strategies) and once more on pointerup.
+    const coarse = typeof matchMedia !== "undefined"
+      && matchMedia("(pointer: coarse)").matches;
+    const startTime = coarse ? (this._video.currentTime || 0) : 0;
+    const startClientX = e.clientX;
+    let lastCommit = 0;
+
+    const timeAt = (clientX: number): number => {
+      if (coarse) {
+        const rect = seekBar.getBoundingClientRect();
+        const dx = clientX - startClientX;
+        const dt = (dx / rect.width) * (this._video.duration || 0);
+        return Math.max(0, Math.min(this._video.duration || 0, startTime + dt));
+      }
+      return this._timeFromSeekPointer(clientX);
+    };
 
-    const initial = this._timeFromSeekPointer(e.clientX);
-    this._seekInput.value = String(initial);
-    this._onSeekInput();
-    this._updateSeekTooltip(e.clientX);
-    if (scrubMode) this._onSeekCommit();
+    const showTooltip = (t: number, clientX: number): void => {
+      if (coarse) this._updateSeekTooltipAtTime(t);
+      else this._updateSeekTooltip(clientX);
+    };
+
+    // Fine mode: tap commits immediately (thumb jumps under pointer).
+    // Coarse mode: tap parks at the current time; only drag moves it.
+    if (!coarse) {
+      const initial = timeAt(e.clientX);
+      this._seekInput.value = String(initial);
+      this._onSeekInput();
+      showTooltip(initial, e.clientX);
+      this._onSeekCommit();
+      this._userSeeking = true; // commit clears it; we're still seeking
+    } else {
+      showTooltip(startTime, e.clientX);
+    }
 
     const onMove = (ev: PointerEvent) => {
-      const t = this._timeFromSeekPointer(ev.clientX);
+      // Belt-and-suspenders for the host's swipe handler. Pointer capture
+      // changes the *target* of subsequent pointermove events to seekBar,
+      // but they still bubble through ancestors — a swipe listener
+      // attached to document/window would otherwise see every drag tick.
+      ev.stopPropagation();
+      const t = timeAt(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
-      this._updateSeekTooltip(ev.clientX);
-      // In scrub mode, commit seeks throttled to ~4 Hz so we don't
-      // overwhelm the seek pipeline (especially on canvas strategies
-      // where each seek restarts the decoder pump).
-      if (scrubMode) {
-        const now = performance.now();
-        if (now - lastScrubCommit > 250) {
-          lastScrubCommit = now;
-          this._onSeekCommit();
-          this._userSeeking = true; // keep seeking flag live
-        }
+      showTooltip(t, ev.clientX);
+      const now = performance.now();
+      if (now - lastCommit > 250) {
+        lastCommit = now;
+        this._onSeekCommit();
+        this._userSeeking = true;
       }
     };
     const onUp = (ev: PointerEvent) => {
-      const t = this._timeFromSeekPointer(ev.clientX);
+      ev.stopPropagation();
+      const t = timeAt(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekCommit();
       this._seekInput.focus();
@@ -511,6 +597,16 @@ export class AvbridgePlayerElement extends HTMLElement {
     this._seekTooltip.style.left = `${frac * 100}%`;
   }
 
+  /** Position the tooltip over a specific time (vs. pointer X). Used by
+   *  relative-drag scrub on coarse pointers, where the displayed time
+   *  is decoupled from the finger position. */
+  private _updateSeekTooltipAtTime(t: number): void {
+    const dur = this._video.duration || 0;
+    const frac = dur > 0 ? Math.max(0, Math.min(1, t / dur)) : 0;
+    this._seekTooltip.textContent = formatTime(t);
+    this._seekTooltip.style.left = `${frac * 100}%`;
+  }
+
   private _updateSeekVisuals(t: number): void {
     const dur = this._video.duration || 0;
     const pct = dur > 0 ? (t / dur) * 100 : 0;
@@ -526,6 +622,18 @@ export class AvbridgePlayerElement extends HTMLElement {
     if (this._userSeeking) return;
     const t = this._video.currentTime;
     const d = this._video.duration;
+    // While a committed seek is still settling, keep the thumb at the
+    // target so it doesn't snap back to the pre-seek position. Clear once
+    // currentTime has landed within 0.5s of the target.
+    if (this._pendingSeekTarget !== null) {
+      if (Math.abs(t - this._pendingSeekTarget) < 0.5) {
+        this._pendingSeekTarget = null;
+      } else {
+        this._timeDisplay.textContent = `${formatTime(this._pendingSeekTarget)} / ${formatTime(d)}`;
+        this._updateBuffered();
+        return;
+      }
+    }
     this._seekInput.value = String(t);
     this._updateSeekVisuals(t);
     this._timeDisplay.textContent = `${formatTime(t)} / ${formatTime(d)}`;
@@ -752,10 +860,13 @@ export class AvbridgePlayerElement extends HTMLElement {
 
   // ── Stats for nerds ────────────────────────────────────────────────────
 
+  private _statsPrev: { ts: number; rt: Record<string, unknown> } | null = null;
+
   private _toggleStats(): void {
     this._statsOpen = !this._statsOpen;
     this._statsEl.classList.toggle("open", this._statsOpen);
     if (this._statsOpen) {
+      this._statsPrev = null; // reset delta baseline
       this._updateStats();
       this._statsInterval = setInterval(() => this._updateStats(), 1000);
     } else {
@@ -767,23 +878,92 @@ export class AvbridgePlayerElement extends HTMLElement {
     const d = this._video.getDiagnostics() as Record<string, unknown> | null;
     if (!d) { this._statsEl.textContent = "No diagnostics"; return; }
     const rt = (d.runtime ?? {}) as Record<string, unknown>;
-    const lines: string[] = [
-      `Container: ${d.container ?? "?"}`,
-      `Video: ${d.videoCodec ?? "?"} ${d.width ?? "?"}×${d.height ?? "?"}`,
-      `Audio: ${d.audioCodec ?? "none"}`,
-      `Strategy: ${d.strategy ?? "?"}  Class: ${d.strategyClass ?? "?"}`,
-      `Transport: ${d.transport ?? "?"} Range: ${d.rangeSupported ?? "?"}`,
-      `Duration: ${typeof d.duration === "number" ? d.duration.toFixed(1) + "s" : "?"}`,
-    ];
-    if (rt.framesDecoded != null) lines.push(`Frames: ${rt.framesDecoded} decoded, ${rt.framesDropped ?? 0} dropped`);
-    if (rt.framesPainted != null) lines.push(`Painted: ${rt.framesPainted} Late: ${rt.framesDroppedLate ?? 0} Overflow: ${rt.framesDroppedOverflow ?? 0}`);
-    if (rt.videoFramesDecoded != null) lines.push(`Video decoded: ${rt.videoFramesDecoded} Chunks fed: ${rt.videoChunksFed ?? "?"}`);
-    if (rt.audioFramesDecoded != null) lines.push(`Audio decoded: ${rt.audioFramesDecoded}`);
-    if (rt.packetsRead != null) lines.push(`Packets read: ${rt.packetsRead}`);
-    if (rt.bsfApplied && (rt.bsfApplied as string[]).length > 0) lines.push(`BSF: ${(rt.bsfApplied as string[]).join(", ")}`);
-    if (rt.audioState != null) lines.push(`Audio state: ${rt.audioState} Clock: ${rt.clockMode ?? "?"}`);
+    const now = performance.now();
+    const prev = this._statsPrev;
+    const dtSec = prev ? Math.max(0.001, (now - prev.ts) / 1000) : 0;
+    const delta = (key: string): number | null => {
+      if (!prev) return null;
+      const a = rt[key];
+      const b = prev.rt[key];
+      if (typeof a === "number" && typeof b === "number") return a - b;
+      return null;
+    };
+    const rate = (key: string): number | null => {
+      const d_ = delta(key);
+      return d_ != null ? d_ / dtSec : null;
+    };
+    const fmt = (n: number | null, digits = 1) => (n == null ? "?" : n.toFixed(digits));
+
+    const sourceFps = (typeof rt.sourceFps === "number" ? rt.sourceFps : d.fps) as number | undefined;
+    const lines: string[] = [];
+
+    // ── Identity ──────────────────────────────────────────────────────
+    lines.push(`Container: ${d.container ?? "?"}   Strategy: ${d.strategy ?? "?"} (${d.strategyClass ?? "?"})`);
+    lines.push(`Video: ${d.videoCodec ?? "?"} ${d.width ?? "?"}×${d.height ?? "?"}${sourceFps ? ` @ ${sourceFps.toFixed(3)} fps` : ""}`);
+    lines.push(`Audio: ${d.audioCodec ?? "none"}   Transport: ${d.transport ?? "?"}${d.rangeSupported === true ? "/range" : ""}`);
+    lines.push(`Duration: ${typeof d.duration === "number" ? d.duration.toFixed(1) + "s" : "?"}   Playback rate: ${this._video.playbackRate.toFixed(2)}x`);
+
+    // ── Realtime rates (deltas per second) ─────────────────────────────
+    if (rt.videoFramesDecoded != null) {
+      const decFps = rate("videoFramesDecoded");
+      const paintFps = rate("framesPainted");
+      const dropLateFps = rate("framesDroppedLate");
+      const dropOverflowFps = rate("framesDroppedOverflow");
+      const pct = sourceFps && decFps != null ? ` (${((decFps / sourceFps) * 100).toFixed(0)}% of realtime)` : "";
+      lines.push(`Decode fps: ${fmt(decFps)}${pct}   Paint fps: ${fmt(paintFps)}`);
+      lines.push(`Drops/sec: late=${fmt(dropLateFps)} overflow=${fmt(dropOverflowFps)}   Totals: painted=${rt.framesPainted} dropped=${rt.framesDroppedLate}`);
+    }
+
+    // ── Decode-time breakdown (wall ms spent inside libav) ────────────
+    if (typeof rt.videoDecodeMsTotal === "number") {
+      const msDelta = delta("videoDecodeMsTotal");
+      const batchesDelta = delta("videoDecodeBatches");
+      const perBatch = msDelta != null && batchesDelta && batchesDelta > 0 ? msDelta / batchesDelta : null;
+      const share = msDelta != null && dtSec > 0 ? (msDelta / (dtSec * 1000)) * 100 : null;
+      lines.push(
+        `Video decode: ${fmt(perBatch)}ms/batch avg   ${fmt(share)}% of wall   slowest=${fmt(rt.slowestVideoBatchMs as number)}ms`,
+      );
+    }
+    if (typeof rt.audioDecodeMsTotal === "number") {
+      const msDelta = delta("audioDecodeMsTotal");
+      const share = msDelta != null && dtSec > 0 ? (msDelta / (dtSec * 1000)) * 100 : null;
+      lines.push(`Audio decode: ${fmt(share)}% of wall`);
+    }
+    if (typeof rt.pumpThrottleMsTotal === "number") {
+      const msDelta = delta("pumpThrottleMsTotal");
+      const share = msDelta != null && dtSec > 0 ? (msDelta / (dtSec * 1000)) * 100 : null;
+      lines.push(`Producer throttled: ${fmt(share)}% of wall`);
+    }
+
+    // ── Queue health ──────────────────────────────────────────────────
+    if (rt.queueDepth != null) {
+      lines.push(
+        `Queue: depth=${rt.queueDepth} span=${fmt(rt.queueSpanMs as number)}ms ` +
+        `head=${fmt(rt.queueHeadMs as number)}ms tail=${fmt(rt.queueTailMs as number)}ms`,
+      );
+    }
+    if (typeof rt.newestVideoPtsMs === "number") {
+      lines.push(`Newest decoded PTS: ${(rt.newestVideoPtsMs / 1000).toFixed(2)}s`);
+    }
+
+    // ── Audio ─────────────────────────────────────────────────────────
+    if (rt.audioState != null) {
+      lines.push(`Audio state: ${rt.audioState}   bufferAhead=${fmt(rt.bufferAhead as number, 2)}s   clock=${rt.clockMode ?? "?"}`);
+    }
+
+    // ── BSF + warnings ────────────────────────────────────────────────
+    if (typeof rt.ptsRegressions === "number" && rt.ptsRegressions > 0) {
+      lines.push(`PTS REGRESSIONS: ${rt.ptsRegressions} (worst=${fmt(rt.worstPtsRegressionMs as number)}ms) — decoder emitting out of order`);
+    }
+    if (rt.bsfApplied && (rt.bsfApplied as string[]).length > 0) lines.push(`BSF active: ${(rt.bsfApplied as string[]).join(", ")}`);
+    if (rt.bsfMissing && (rt.bsfMissing as string[]).length > 0) {
+      lines.push(`BSF MISSING: ${(rt.bsfMissing as string[]).join(", ")} (rebuild libav with avbsf)`);
+    }
+
     if (d.probedBy) lines.push(`Probed by: ${d.probedBy}`);
+
     this._statsEl.textContent = lines.join("\n");
+    this._statsPrev = { ts: now, rt: { ...rt } };
   }
 
   // ── Controls: fullscreen ───────────────────────────────────────────────

package/src/probe/avi.ts

@@ -77,7 +77,7 @@ export async function probeWithLibav(
         codec: ffmpegToAvbridgeVideo(codecName),
         width: codecpar?.width ?? 0,
         height: codecpar?.height ?? 0,
-        fps: framerate(stream),
+        fps: await framerate(libav, stream),
       });
     } else if (stream.codec_type === libav.AVMEDIA_TYPE_AUDIO) {
       audioTracks.push({
@@ -111,7 +111,27 @@ export async function probeWithLibav(
   };
 }
 
-function framerate(stream: LibavStream): number | undefined {
+/**
+ * Read frame rate from the stream's `AVCodecParameters.framerate`.
+ *
+ * `avg_frame_rate` / `r_frame_rate` live on the AVStream in C but libav.js
+ * doesn't expose them as JS properties on the stream record — only via
+ * dedicated accessor functions we don't ship. `codecpar.framerate` IS
+ * accessible via `AVCodecParameters_framerate_num/_den` and is populated
+ * for most containers (for AVI it's parsed from `dwRate`/`dwScale` in the
+ * stream header).
+ *
+ * Returns undefined if unavailable so the caller can fall back to a
+ * container-appropriate default (currently 30 fps, which is wrong for
+ * 25 fps PAL and 23.976 fps film content — hence the importance of
+ * reading this correctly).
+ */
+async function framerate(
+  libav: LibavInstance,
+  stream: LibavStream,
+): Promise<number | undefined> {
+  // The stream record may still carry these (new libav.js versions) —
+  // prefer them when present.
   if (typeof stream.avg_frame_rate_num === "number" && stream.avg_frame_rate_den) {
     return stream.avg_frame_rate_num / stream.avg_frame_rate_den;
   }
@@ -119,6 +139,15 @@ function framerate(stream: LibavStream): number | undefined {
     if (stream.avg_frame_rate.den === 0) return undefined;
     return stream.avg_frame_rate.num / stream.avg_frame_rate.den;
   }
+  try {
+    const num = await libav.AVCodecParameters_framerate_num?.(stream.codecpar);
+    const den = await libav.AVCodecParameters_framerate_den?.(stream.codecpar);
+    if (typeof num === "number" && typeof den === "number" && den > 0 && num > 0) {
+      return num / den;
+    }
+  } catch {
+    // Fall through.
+  }
   return undefined;
 }
 
@@ -250,6 +279,9 @@ interface LibavInstance {
   AVFormatContext_durationhi?(ctx: number): Promise<number>;
   i64tof64?(lo: number, hi: number): number;
 
+  AVCodecParameters_framerate_num?(codecpar: number): Promise<number>;
+  AVCodecParameters_framerate_den?(codecpar: number): Promise<number>;
+
   AVMEDIA_TYPE_VIDEO: number;
   AVMEDIA_TYPE_AUDIO: number;
 }