imgtune 0.1.0 → 0.2.0

package/dist/remote.js

@@ -6,13 +6,13 @@ import { launchChromium } from "./browser.js";
 import sharp from "sharp";
 import { writeFileAtomic, sha1 } from "./atomic.js";
 import { errorLine, mdCode, mdText, safeText } from "./text.js";
-import { commentHints } from "./hints.js";
+import { commentHints, videoRowOf, videoTotalsLine } from "./hints.js";
 import { lcpLinesOf } from "./lcp.js";
 import { MAX_MAX_QUALITIES, MIN_MAX_QUALITIES, planQualityCap, qualitiesLine } from "./qualities-cap.js";
 export { mdCode, mdText, safeText };
 import { isLocalTarget, systemResolver } from "./address.js";
 import { startEgressProxy } from "./egress-proxy.js";
-import { makeFetcher } from "./fetch.js";
+import { makeFetcher, MAX_IMAGE_BYTES } from "./fetch.js";
 import { sameSite } from "./site.js";
 import { confirmMatch, matchLocalQuality } from "./calibrate.js";
 import { DEFAULT_THIRD_PARTY, isThirdPartyBlocked, parseAllowHosts, thirdPartyFromFlags } from "./third-party.js";
@@ -21,16 +21,19 @@ import { encode, encodedBytes, ENCODE_THREADS, ENCODER_ID, FAST_AVIF_EFFORT } fr
 import { adapterFor, formatAutoOf, originalOf } from "./loaders.js";
 import { COMPONENT_NAME, MAX_SOURCE_READ, imageAtLine, parseSourceMap, resolveFunctionLocations, resolveOwnerChain, resolveOwners } from "./locate.js";
 import { buildImageRecords, hasFix, rungOfPage } from "./images.js";
+import { animationOf } from "./animated.js";
+import { fullBytesOf, SCAN_MAX_VIDEO_WIDTHS, videoRecordsOf, withPosterImages } from "./video-analysis.js";
 import { backgroundPage, backgroundTotals, buildBackgroundRecords, displayedCssWidth, MAX_BACKGROUND_ELEMENTS, MAX_BACKGROUND_VALUE, backgroundTooLarge, neededDevicePixels, parseBackgroundImage, parseBackgroundSize, pickLoaded, } from "./backgrounds.js";
 import { applySizesOutcome } from "./sizes-outcome.js";
 import { sampleByPattern, urlsFromSource } from "./urls.js";
 import { groupRoutes, parseRouteMap } from "./routes.js";
 import { countDocumentNavigations, gotoParsed, NETWORK_IDLE_TIMEOUT_MS, settlePage, settleWithin, waitForLoadWithin, BODY_READ_TIMEOUT_MS } from "./measure.js";
 import { makeScorer } from "./metric.js";
-import { gpuNote, parseGpuDevice, startGpuScorer } from "./gpu.js";
+import { gpuNote, startGpuScorer, gpuSettingOf, gpuSettingOne } from "./gpu.js";
 import { bisectQuality, confirmBisect, minPassingQuality } from "./search.js";
 import { SURVEY_IDLE_TIMEOUT_MS, SURVEY_PAGE_CONCURRENCY, SURVEY_VIEWPORTS, surveyNote } from "./survey.js";
 import { cacheScope, CACHE_DIR, CACHE_VERSION, contentHash, ResultCache, resizeScope } from "./result-cache.js";
+import { attachMediaResults, mediaAssetsOf, partitionByPolicy, probeLengths, refineAssetLength, runMediaPhase, skippedMedia, } from "./media-phase.js";
 import { BROKEN_EXIT, withBroken } from "./broken.js";
 import { EstimateRegistry, hashOf, withEstimates } from "./estimate-jobs.js";
 import { isFolder, sourceRootOf, unreadSourceNote } from "./source-root.js";
@@ -41,6 +44,7 @@ import { count, measure, renderTiming, resetTiming, TIMING_ENABLED } from "./tim
 import { mapLimit, settleLimit } from "./concurrency.js";
 import { getBlob, putBlob, readStagedJson, removeStage, stageDirOf, writeStagedJson } from "./stage.js";
 import { loadGroups } from "./loads.js";
+import { probeFfmpeg } from "./ffmpeg.js";
 export { ipv6Bytes, isBlockedAddress, isLocalTarget, isPrivateAddress, refusedAddress, guardedLookup } from "./address.js";
 export { makeFetcher, MAX_IMAGE_BYTES } from "./fetch.js";
 export { registrableDomain, sameSite } from "./site.js";
@@ -369,6 +373,11 @@ const VALUE_OPTIONS = [
     "--max-qualities",
     "--page-concurrency",
     "--idle-timeout",
+    "--media-budget",
+    "--media-time",
+    "--video-bar",
+    "--video-still-bar",
+    "--max-video-widths",
     "--urls-from",
     "--sample-per-pattern",
     "--route-map",
@@ -390,6 +399,13 @@ export function parseRange(name, text, min, max) {
     }
     return value;
 }
+/** The media phase's limits and defaults (see media-phase.ts and the --media-* flags). */
+export const DEFAULT_MEDIA_BUDGET = 20;
+const MAX_MEDIA_BUDGET = 1000;
+export const DEFAULT_MEDIA_TIME = 600;
+const MAX_MEDIA_TIME = 3600;
+export const DEFAULT_VIDEO_BAR = 93;
+export const DEFAULT_VIDEO_STILL_BAR = 65;
 /** The arguments after `scan`: one or more page URLs and the options. Throws with a message the CLI prints. */
 export function parseScanArgs(argv) {
     const args = { urls: [], out: DEFAULT_OUT, aggressive: false, quality: true, thirdParty: DEFAULT_THIRD_PARTY };
@@ -411,9 +427,11 @@ export function parseScanArgs(argv) {
         else if (arg === "--resume")
             args.resume = true;
         else if (arg === "--gpu")
-            args.gpu ??= { device: 0 };
+            args.gpu ??= gpuSettingOne(0);
         else if (arg === "--no-cache")
             args.noCache = true;
+        else if (arg === "--gpu-encode")
+            args.gpuEncode = true;
         else if (arg === "--harness")
             args.harness = true;
         else if (arg === "--survey")
@@ -447,6 +465,16 @@ export function parseScanArgs(argv) {
                 args.pageConcurrency = parseRange(arg, value, 1, MAX_PAGE_CONCURRENCY);
             else if (arg === "--idle-timeout")
                 args.idleTimeoutMs = parseRange(arg, value, 0, MAX_IDLE_TIMEOUT_MS);
+            else if (arg === "--media-budget")
+                args.mediaBudget = parseRange(arg, value, 0, MAX_MEDIA_BUDGET);
+            else if (arg === "--media-time")
+                args.mediaTime = parseRange(arg, value, 1, MAX_MEDIA_TIME);
+            else if (arg === "--video-bar")
+                args.videoBar = parseRange(arg, value, 0, 100);
+            else if (arg === "--video-still-bar")
+                args.videoStillBar = parseRange(arg, value, 0, 100);
+            else if (arg === "--max-video-widths")
+                args.maxVideoWidths = parseRange(arg, value, 1, 3);
             else if (arg === "--urls-from")
                 args.urlsFrom = value;
             else if (arg === "--sample-per-pattern")
@@ -456,7 +484,7 @@ export function parseScanArgs(argv) {
             else if (arg === "--storage-state")
                 args.storageState = value;
             else if (arg === "--gpu-device")
-                args.gpu = { device: parseGpuDevice(value) };
+                args.gpu = gpuSettingOf(value);
             else if (arg === "--allow-host")
                 allowHosts = parseAllowHosts(value);
             else
@@ -510,6 +538,26 @@ export async function pixelSize(buffer) {
         return undefined;
     }
 }
+/** The animation of a response's bytes, read once per buffer (see animated.ts). Undefined for a still image. */
+const animationMemo = new WeakMap();
+export function animationOfBuffer(buffer) {
+    let info = animationMemo.get(buffer);
+    if (info === undefined) {
+        info = animationOf(buffer) ?? null;
+        animationMemo.set(buffer, info);
+    }
+    return info ?? undefined;
+}
+/**
+ * The format the pixel rules judge a file by. A static GIF is a lossless palette file, so it takes the PNG rules (a
+ * local resize, and the AVIF that meets the file's own score). An animated GIF takes none of them: its saving is an
+ * encode to video or animated AVIF (see video-analysis.ts), so it keeps its own name and gets no estimate here. The
+ * bytes must really be a GIF (its signature), so a label alone never routes a file to the PNG rules.
+ */
+export function pixelRuleFormat(format, buffer) {
+    const isGif = buffer.toString("latin1", 0, 4) === "GIF8";
+    return format === "gif" && isGif && animationOfBuffer(buffer) === undefined ? "png" : format;
+}
 /** The file decoded to 8-bit RGBA; resized to `size` when given and different (the scorer needs equal dimensions). */
 export async function decodeRaw(buffer, size) {
     const { data, info } = await openImage(buffer).rotate().ensureAlpha().raw().toBuffer({ resolveWithObject: true });
@@ -613,7 +661,7 @@ export async function matchedQualityOf(buffer, format) {
  */
 export async function resizedEstimate(buffer, format, requestedWidth, quality) {
     const targetWidth = clampWidth(requestedWidth);
-    if (format === "png") {
+    if (pixelRuleFormat(format, buffer) === "png") {
         const out = await openImage(buffer).rotate().resize({ width: targetWidth, withoutEnlargement: true }).png().toBuffer();
         return { bytes: out.length, buffer: out };
     }
@@ -784,7 +832,8 @@ export async function estimateQuality(input, deltas, deps) {
         }
         return { ratio, target };
     }
-    if (input.format === "jpeg" || input.format === "png") {
+    const lossless = pixelRuleFormat(input.format, input.served);
+    if (lossless === "jpeg" || lossless === "png") {
         const servedRaw = await measure("decode: served", () => decodeRaw(input.served, { width: reference.width, height: reference.height }));
         const ownScore = await score(reference, servedRaw);
         for (const delta of deltas) {
@@ -806,9 +855,75 @@ function isNavigationError(err) {
 export const LAYOUT_DEPTH = 15;
 /** React owners read per image, nearest first. */
 export const MAX_OWNERS = 8;
+/**
+ * Whether a <video> source is out of scope: a blob or media-stream URL (made by the page, not a file), an adaptive stream
+ * (HLS .m3u8 or DASH .mpd, with or without a query string), or no source at all. readView applies the same rule in the
+ * browser, before a video leaves the page, so the rule is written there too.
+ */
+export function isOutOfScopeVideo(src) {
+    return src.trim() === "" || /^(blob|mediastream):/i.test(src) || /\.(m3u8|mpd)(?:[?#]|$)/i.test(src);
+}
+/**
+ * The bytes a media response carries, from its headers: Content-Length, else the span of Content-Range (`bytes a-b/total`
+ * is b - a + 1). Undefined when neither gives a length. The body is never read.
+ */
+export function mediaBytesOf(headers) {
+    const length = headers["content-length"];
+    if (length !== undefined && /^\d+$/.test(length.trim()))
+        return Number(length);
+    const range = /^bytes (\d+)-(\d+)\/(\d+|\*)$/i.exec((headers["content-range"] ?? "").trim());
+    if (range && Number(range[2]) >= Number(range[1]))
+        return Number(range[2]) - Number(range[1]) + 1;
+    return undefined;
+}
+/**
+ * The start and the total of a Content-Range header (`bytes a-b/total`), when it has them. Undefined fields when the
+ * header is absent or does not parse (a 200 has none, so its bytes start at 0).
+ */
+export function contentRangeOf(headers) {
+    const range = /^bytes (\d+)-(\d+)\/(\d+|\*)$/i.exec((headers["content-range"] ?? "").trim());
+    if (!range)
+        return {};
+    const total = range[3] === "*" ? undefined : Number(range[3]);
+    return { start: Number(range[1]), ...(total !== undefined ? { total } : {}) };
+}
+/** Merges [start, end) ranges into the ascending, disjoint list that covers the same bytes. */
+export function mergeRanges(ranges) {
+    const sorted = ranges.filter(([a, b]) => b > a).sort((x, y) => x[0] - y[0] || x[1] - y[1]);
+    const merged = [];
+    for (const [start, end] of sorted) {
+        const last = merged[merged.length - 1];
+        if (last && start <= last[1])
+            last[1] = Math.max(last[1], end);
+        else
+            merged.push([start, end]);
+    }
+    return merged;
+}
+/**
+ * Adds one media response's bytes to the page load's map (see readGroup). The response covers [start, start + bytes) (a
+ * 200 starts at 0), so a re-request of bytes already received adds nothing: the figure is the union of the ranges, capped
+ * at the file's total when one is known. The status and content type are the last ones seen. Every media response counts,
+ * a 200 as well as a 206 (a server that ignores Range sends the whole file, and the bytes the page moved are the union).
+ */
+export function addMediaResponse(media, response) {
+    const prev = media.get(response.url);
+    const start = response.start ?? 0;
+    const ranges = mergeRanges([...(prev?.ranges ?? []), [start, start + response.bytes]]);
+    const total = response.total ?? prev?.total;
+    const union = ranges.reduce((sum, [a, b]) => sum + (b - a), 0);
+    media.set(response.url, {
+        url: response.url,
+        contentType: response.contentType ?? prev?.contentType,
+        bytes: total !== undefined ? Math.min(union, total) : union,
+        status: response.status,
+        ranges,
+        ...(total !== undefined ? { total } : {}),
+    });
+}
 /** One read of the page as it stands: its images and whether it is a Next.js app. */
-async function readView(page, light = false) {
-    const seen = await page.evaluate(({ depth, maxOwners, maxBackgrounds, maxValue, light }) => {
+async function readView(page, light = false, withVideos = false) {
+    const seen = await page.evaluate(({ depth, maxOwners, maxBackgrounds, maxValue, light, withVideos }) => {
         const num = (value) => {
             const n = parseFloat(value);
             return Number.isFinite(n) ? n : 0;
@@ -1007,8 +1122,61 @@ async function readView(page, light = false) {
                 });
             }
         }
-        return { nextjs, images, backgrounds };
-    }, { depth: LAYOUT_DEPTH, maxOwners: MAX_OWNERS, maxBackgrounds: MAX_BACKGROUND_ELEMENTS, maxValue: MAX_BACKGROUND_VALUE, light });
+        // <video> elements with a file source. Blob, media-stream and adaptive sources, and an empty src, are dropped here
+        // (the rule of isOutOfScopeVideo, written out because this function cannot import it). A data: URI is replaced
+        // before it leaves the browser. A light read takes none unless it asks (a locate joins the dev page's videos: the DOM
+        // read is cheap, and no media is read). Only the top document is read: a video in an iframe is not.
+        const videos = [];
+        if (!light || withVideos) {
+            const OUT_OF_SCOPE = (src) => src.trim() === "" || /^(blob|mediastream):/i.test(src) || /\.(m3u8|mpd)(?:[?#]|$)/i.test(src);
+            const shortUrl = (url) => (url.startsWith("data:") ? "data:" : url);
+            document.querySelectorAll("video").forEach((video, index) => {
+                // A src attribute wins: the browser ignores the <source> children then, so they are not read at all.
+                const hasSrcAttribute = (video.getAttribute("src") ?? "").trim() !== "";
+                const sourceEls = hasSrcAttribute ? [] : Array.from(video.querySelectorAll("source"));
+                // The source the browser plays. When it chose none (every source refused, so currentSrc is ""), the src attribute,
+                // else the first in-scope <source>. Dropped only when none is in scope.
+                const inScope = sourceEls.map((source) => source.src).filter((src) => !OUT_OF_SCOPE(src));
+                const playing = video.currentSrc !== "" ? video.currentSrc : hasSrcAttribute ? video.src : (inScope[0] ?? video.src);
+                if (OUT_OF_SCOPE(playing))
+                    return;
+                const cs = getComputedStyle(video);
+                const rect = video.getBoundingClientRect();
+                videos.push({
+                    index,
+                    currentSrc: shortUrl(playing),
+                    // The out-of-scope <source> children are left out, as the video itself is when its source is out of scope.
+                    sources: sourceEls
+                        .filter((source) => !OUT_OF_SCOPE(source.src))
+                        .map((source) => ({
+                        src: shortUrl(source.src),
+                        type: source.getAttribute("type") ?? undefined,
+                        media: source.getAttribute("media") ?? undefined,
+                    })),
+                    autoplay: video.autoplay,
+                    muted: video.muted,
+                    loop: video.loop,
+                    playsinline: video.hasAttribute("playsinline"),
+                    controls: video.controls,
+                    preload: video.getAttribute("preload") ?? "",
+                    poster: video.poster ? shortUrl(video.poster) : undefined,
+                    paused: video.paused,
+                    ...(video.error ? { errorCode: video.error.code } : {}),
+                    renderedWidth: rect.width,
+                    renderedHeight: rect.height,
+                    ...(video.videoWidth > 0 ? { videoWidth: video.videoWidth } : {}),
+                    inFirstViewport: rect.bottom > 0 && rect.top < window.innerHeight,
+                    hidden: cs.display === "none" || cs.visibility === "hidden" || rect.width === 0 || rect.height === 0,
+                    locator: {
+                        testid: video.closest("[data-testid]")?.getAttribute("data-testid") ?? undefined,
+                        selector: cssPath(video),
+                        owners: ownersOf(fiberOf(video)),
+                    },
+                });
+            });
+        }
+        return { nextjs, images, backgrounds, videos };
+    }, { depth: LAYOUT_DEPTH, maxOwners: MAX_OWNERS, maxBackgrounds: MAX_BACKGROUND_ELEMENTS, maxValue: MAX_BACKGROUND_VALUE, light, withVideos });
     const html = seen.images.length === 0 ? await page.content() : "";
     return { seen, html };
 }
@@ -1093,7 +1261,7 @@ export async function readLcp(page) {
  * location change after load). At most MAX_POST_LOAD_NAVIGATIONS repeats; past that, the last complete read is used.
  * `readLcpFirst`: the LCP is read before the first scroll, and kept with the read it belongs to (fresh loads only).
  */
-async function settledView(page, navigations, loadCapMs, light = false, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, afterSettle, readLcpFirst = false) {
+async function settledView(page, navigations, loadCapMs, light = false, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, afterSettle, readLcpFirst = false, withVideos = false) {
     let last;
     for (let repeat = 0;; repeat++) {
         const start = navigations();
@@ -1112,7 +1280,7 @@ async function settledView(page, navigations, loadCapMs, light = false, idleTime
             });
             if (afterSettle !== undefined)
                 await afterSettle();
-            view = await measure("read view", () => readView(page, light));
+            view = await measure("read view", () => readView(page, light, withVideos));
             view.lcp = lcp;
         }
         catch (err) {
@@ -1295,13 +1463,31 @@ function responsesOfStep(fetched, answered, seen, dpr) {
  *
  * `light` (the locate and sizes-only paths) reads no image bodies and no layout chain, and is always a single fresh load.
  */
-async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs) {
+async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos = false) {
     const first = viewports[0];
     const outcomes = [];
     let fresh = [];
     // Every image response of the document, by URL (the latest one for a URL fetched twice).
     const fetched = new Map();
+    // Every media (video) response of the page load, by URL: its bytes from the headers, never from the body.
+    const media = new Map();
     const bodyReads = [];
+    // The media bodies, awaited on their own: they share one deadline for the whole page load (see mediaDeadline below).
+    const mediaReads = [];
+    // Per media response: counts the bytes that arrived, for a response still streaming when the media reads settle.
+    const mediaFallbacks = [];
+    // The media requests in flight, by request id: the bytes received so far (CDP dataReceived), for the fallback above.
+    const inFlightMedia = new Map();
+    const streamedBytesOf = (url) => {
+        let bytes = 0;
+        for (const entry of inFlightMedia.values())
+            if (entry.url === url)
+                bytes += entry.bytes;
+        return bytes;
+    };
+    // One deadline for the media reads of the whole page load: the viewport steps share it, so a stream that never ends
+    // costs BODY_READ_TIMEOUT_MS once per page, not once per viewport.
+    let mediaDeadline;
     let blockedRequests = 0;
     let thirdPartyBlocked = 0;
     // Stylesheet URLs the browser could not apply (refused, failed or blocked): one entry per URL.
@@ -1389,6 +1575,40 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                 if (response.request().resourceType() === "stylesheet" && response.status() >= 400)
                     failedSheets.add(response.url());
                 const contentType = response.headers()["content-type"];
+                // A media response is sized once it has finished, from the browser's count of its body (sizes): the body is never
+                // read, since a video can be far too big to buffer. Chunked answers have no Content-Length, so the headers are the
+                // fallback only: when sizes fails or reports 0, or when the response is still streaming at the settle (see below).
+                // A light read reads no media at all: it waits on none of it.
+                if (response.request().resourceType() === "media" || (contentType ?? "").toLowerCase().startsWith("video/")) {
+                    if (light)
+                        return;
+                    const url = response.url();
+                    const status = response.status();
+                    const headers = response.headers();
+                    const headerBytes = mediaBytesOf(headers) ?? 0;
+                    const { start, total } = contentRangeOf(headers);
+                    let counted = false;
+                    const count = (bytes) => {
+                        if (counted)
+                            return;
+                        counted = true;
+                        addMediaResponse(media, { url, status, contentType, bytes, start, total });
+                    };
+                    mediaReads.push((async () => {
+                        try {
+                            // An aborted range request also finishes (with an error): its sizes still count what was received.
+                            await response.finished();
+                            const { responseBodySize } = await response.request().sizes();
+                            count(responseBodySize > 0 ? responseBodySize : headerBytes);
+                        }
+                        catch {
+                            count(headerBytes);
+                        }
+                    })());
+                    // Still streaming at the settle: the bytes that have arrived so far (or the header bytes, when those are more).
+                    mediaFallbacks.push(() => count(Math.max(headerBytes, streamedBytesOf(url))));
+                    return;
+                }
                 const isImage = response.request().resourceType() === "image" || (contentType ?? "").toLowerCase().startsWith("image/");
                 if (!isImage)
                     return;
@@ -1427,13 +1647,28 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                 navigations = await countDocumentNavigations(context, page);
             }
             // The requests in flight, for the network-idle wait after a resize (the browser's own events).
-            const cdp = viewports.length > 1 ? await context.newCDPSession(page) : undefined;
-            if (cdp !== undefined) {
-                cdp.on("Network.requestWillBeSent", (event) => busy.add(event.requestId));
-                cdp.on("Network.loadingFinished", (event) => busy.delete(event.requestId));
-                cdp.on("Network.loadingFailed", (event) => busy.delete(event.requestId));
-                await cdp.send("Network.enable");
-            }
+            // Always opened: the media bytes that arrive before a settle are read from its data events (see inFlightMedia).
+            const cdp = await context.newCDPSession(page);
+            // A media request is not counted as busy: a streaming autoplay video never finishes, and would hold every resize's
+            // network-idle wait to its cap. Its bytes are still counted per response (see the media branch above).
+            cdp.on("Network.requestWillBeSent", (event) => {
+                if (event.type === "Media")
+                    inFlightMedia.set(event.requestId, { url: event.request?.url ?? "", bytes: 0 });
+                else
+                    busy.add(event.requestId);
+            });
+            cdp.on("Network.dataReceived", (event) => {
+                const entry = inFlightMedia.get(event.requestId);
+                if (entry !== undefined)
+                    entry.bytes += event.dataLength ?? 0;
+            });
+            const done = (event) => {
+                busy.delete(event.requestId);
+                inFlightMedia.delete(event.requestId);
+            };
+            cdp.on("Network.loadingFinished", done);
+            cdp.on("Network.loadingFailed", done);
+            await cdp.send("Network.enable");
             const resizeState = { userAgent: first.userAgent };
             let loaded;
             for (const [step, viewport] of viewports.entries()) {
@@ -1449,7 +1684,10 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                         await measure(`resize ${viewport.name}`, () => resizeTo(cdp, page, viewport, resizeState));
                     }
                     // The LCP belongs to the page's own load: a fresh load's viewport reads it (a resized one shares that load's LCP).
-                    const { seen, html, lcp } = await settledView(page, navigations, loadCapMs, light, idleTimeoutMs, step === 0 ? undefined : () => waitNetworkQuiet(() => busy.size, idleTimeoutMs), !light && step === 0);
+                    const { seen, html, lcp } = await settledView(page, navigations, loadCapMs, light, idleTimeoutMs, 
+                    // Every full read waits on the busy set, fresh load included: Playwright's networkidle counts the media requests
+                    // too, so a streaming video would hold a fresh load to the cap. A light fresh load waits for nothing, as before.
+                    step === 0 && light ? undefined : () => waitNetworkQuiet(() => busy.size, idleTimeoutMs), !light && step === 0, withVideos);
                     if (step > 0 && navigations() !== navigatedBefore) {
                         fresh = viewports.slice(step);
                         break;
@@ -1466,6 +1704,11 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                         await debug.session.detach().catch(() => undefined);
                     }
                     await measure("body reads", () => settleWithin(bodyReads, BODY_READ_TIMEOUT_MS));
+                    mediaDeadline ??= Date.now() + BODY_READ_TIMEOUT_MS;
+                    await measure("media reads", () => settleWithin(mediaReads, Math.max(0, mediaDeadline - Date.now())));
+                    // A media response still streaming at the settle counts the bytes that arrived; it is not waited for.
+                    for (const fallback of mediaFallbacks)
+                        fallback();
                     const responses = step === 0 ? new Map(fetched) : responsesOfStep(fetched, answered, seen, viewport.dpr);
                     count("image responses", responses.size);
                     for (const record of responses.values()) {
@@ -1489,6 +1732,9 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                             nextjs: seen.nextjs,
                             images: seen.images,
                             backgrounds: seen.backgrounds,
+                            videos: seen.videos,
+                            // A copy: the page load's records keep growing for the viewports after this one.
+                            media: new Map(media),
                             stylesheetsFailed: failedSheets.size,
                             stylesheetHosts: hostsOf(failedSheets),
                             responses,
@@ -1516,17 +1762,17 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
  * The observations of one load group (see readGroup), one outcome per viewport in the order given. A group of one
  * viewport is a fresh load: the default. `--shared-loads` groups the viewports of a class into one load.
  */
-export async function observeLoads(browser, pageUrl, viewports, guard, loadCapMs = LOAD_EVENT_CAP_MS, storageState, light = false, functionsWanted, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS) {
-    const { outcomes, fresh } = await readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs);
+export async function observeLoads(browser, pageUrl, viewports, guard, loadCapMs = LOAD_EVENT_CAP_MS, storageState, light = false, functionsWanted, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, withVideos = false) {
+    const { outcomes, fresh } = await readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos);
     for (const viewport of fresh) {
-        const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs);
+        const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos);
         outcomes.push(outcome);
     }
     return outcomes;
 }
 /** One viewport's observation by a fresh load (the locate and sizes-only paths). */
-async function observeViewport(browser, pageUrl, viewport, guard, loadCapMs = LOAD_EVENT_CAP_MS, storageState, light = false, functionsWanted, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS) {
-    const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs);
+async function observeViewport(browser, pageUrl, viewport, guard, loadCapMs = LOAD_EVENT_CAP_MS, storageState, light = false, functionsWanted, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, withVideos = false) {
+    const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos);
     if (!outcome.ok)
         throw outcome.error;
     return outcome.value;
@@ -1612,22 +1858,43 @@ async function resolveSources(ctx, observations, wanted) {
         for (const img of obs.images) {
             if (wanted && !wanted(img))
                 continue;
-            const owners = img.locator?.owners ?? [];
-            const chain = owners.length > 0 ? await resolveOwnerChain(owners, (chunk) => loadSourceMap(ctx, chunk)) : [];
-            const dev = chain[0] !== undefined ? { file: chain[0].file, line: chain[0].line } : undefined;
-            // A production build has no owner source: the function locations of the owners stand in (prod-sourcemap).
-            const prod = dev === undefined && img.locator?.functionLocations?.length
-                ? await resolveFunctionLocations(img.locator.functionLocations, (chunk) => loadSourceMap(ctx, chunk))
-                : undefined;
-            const found = dev ?? prod;
-            const via = dev ? "react-dev" : prod ? "prod-sourcemap" : undefined;
-            const component = componentNamesOf(owners);
-            const check = found ? await checkSource(ctx, texts, found.file, found.line, component[0]) : undefined;
-            resolved.set(img, { file: found?.file, line: found?.line, component, check, via, ownerChain: chain.length > 0 ? chain : undefined });
+            resolved.set(img, await resolveLocator(ctx, texts, img.locator));
         }
     }
     return resolved;
 }
+/**
+ * The owner source of each observed <video> (the same rule as an image's, see resolveLocator): its file:line on a dev build,
+ * or the function location on a production build, and the check of that line. Used by the scan's video records and by a
+ * locate, which joins the dev page's videos to the measured ones.
+ */
+async function resolveVideoSources(ctx, observations) {
+    const resolved = new Map();
+    const texts = new Map();
+    for (const obs of observations) {
+        for (const video of obs.videos ?? [])
+            resolved.set(video, await resolveLocator(ctx, texts, video.locator));
+    }
+    return resolved;
+}
+/**
+ * The source of one observed element from its locator: the React owner chain (dev builds, through the source map), else the
+ * owner's function location (production builds), and the check of the file:line against the project file.
+ */
+async function resolveLocator(ctx, texts, locator) {
+    const owners = locator?.owners ?? [];
+    const chain = owners.length > 0 ? await resolveOwnerChain(owners, (chunk) => loadSourceMap(ctx, chunk)) : [];
+    const dev = chain[0] !== undefined ? { file: chain[0].file, line: chain[0].line } : undefined;
+    // A production build has no owner source: the function locations of the owners stand in (prod-sourcemap).
+    const prod = dev === undefined && locator?.functionLocations?.length
+        ? await resolveFunctionLocations(locator.functionLocations, (chunk) => loadSourceMap(ctx, chunk))
+        : undefined;
+    const found = dev ?? prod;
+    const via = dev ? "react-dev" : prod ? "prod-sourcemap" : undefined;
+    const component = componentNamesOf(owners);
+    const check = found ? await checkSource(ctx, texts, found.file, found.line, component[0]) : undefined;
+    return { file: found?.file, line: found?.line, component, check, via, ownerChain: chain.length > 0 ? chain : undefined };
+}
 const formatName = (format) => (format === "jpg" ? "jpeg" : format);
 /**
  * The owner of each CSS background element, by its index (the first viewport that has it). Owners give the component
@@ -1708,7 +1975,10 @@ async function measureBackground(ctx, obs, bg, layerIndex, layer, size) {
         needed,
         undersized: served.width < UNDERSIZED_RATIO * needed,
     });
-    if (ctx.estimates !== false && served.width > PLAIN_RESIZE_RATIO * needed && served.format) {
+    const animated = animationOfBuffer(response.buffer);
+    if (animated !== undefined)
+        instance.animated = animated;
+    if (ctx.estimates !== false && animated === undefined && served.width > PLAIN_RESIZE_RATIO * needed && served.format) {
         const resized = await measure("background resize estimate", () => resizeEstimateOf(ctx, response.buffer, served.format, needed));
         if (resized)
             Object.assign(instance, approxEst(Math.max(0, response.bytes - resized.bytes), resized.approx));
@@ -1753,6 +2023,9 @@ async function baseline(ctx, obs, img) {
     if (!served)
         return skip("not decodable");
     Object.assign(instance, { bytes: response.bytes, pixelWidth: served.width, format: formatName(served.format) });
+    const animated = animationOfBuffer(response.buffer);
+    if (animated !== undefined)
+        instance.animated = animated;
     const candidates = parseSrcset(img.srcset, ctx.pageUrl);
     if (candidates.length > 0) {
         const largest = Math.max(...candidates.map((c) => c.width));
@@ -1790,9 +2063,10 @@ async function baseline(ctx, obs, img) {
         }
         return instance;
     }
-    // No w-descriptor srcset: a wider file than needed is estimated by a local resize at its own format (est.).
+    // No w-descriptor srcset: a wider file than needed is estimated by a local resize at its own format (est.). An animated
+    // file gets no resize estimate: its saving is an encode.
     instance.kind = "plain";
-    if (ctx.estimates !== false && served.width > PLAIN_RESIZE_RATIO * needed && served.format) {
+    if (ctx.estimates !== false && instance.animated === undefined && served.width > PLAIN_RESIZE_RATIO * needed && served.format) {
         const resized = await measure("plain resize estimate", () => resizeEstimateOf(ctx, response.buffer, served.format, needed));
         if (resized)
             Object.assign(instance, approxEst(Math.max(0, response.bytes - resized.bytes), resized.approx));
@@ -1839,7 +2113,8 @@ export const CDN_AUTO_QUALITY_SHARE = 0.1;
  */
 export function applyCdnPolicies(instances, viewportCount) {
     for (const inst of instances) {
-        if (inst.formatAuto === true && inst.kind !== "skipped" && (inst.format === "jpeg" || inst.format === "png")) {
+        const lossless = inst.format === "jpeg" || inst.format === "png" || (inst.format === "gif" && inst.animated === undefined);
+        if (inst.formatAuto === true && inst.kind !== "skipped" && lossless) {
             inst.est = 0;
             inst.estAggressive = 0;
         }
@@ -1881,7 +2156,8 @@ function median(values) {
 async function estimateQualities(ctx, all, refName) {
     const groups = new Map();
     for (const inst of all) {
-        if (inst.kind !== "srcset" || !inst.right)
+        // An animated file has no quality sweep: its saving is an encode (see video-analysis.ts), not a re-encode of the still.
+        if (inst.kind !== "srcset" || !inst.right || inst.animated !== undefined)
             continue;
         if (ctx.qualityFor && !ctx.qualityFor(inst))
             continue;
@@ -2018,9 +2294,23 @@ export function applyQuality(inst) {
 /** The `robots` value recorded for a page on a loopback or private host: its owner's own server is not checked. */
 export const ROBOTS_SKIPPED_LOCAL = "skipped (local host)";
 /** The options of one page's output, for the completeness check of --resume. */
-export function recordOptionsOf(opts) {
+export function recordOptionsOf(opts, ffmpeg) {
     const thirdParty = opts.thirdParty ?? DEFAULT_THIRD_PARTY;
+    // The media settings are recorded when encodes can run, so a page scanned under other settings (or without ffmpeg) is
+    // not reused by --resume. Without encodes they are left out, and the record keeps its shape.
+    const encodes = opts.quality === true && opts.survey !== true && ffmpeg !== undefined;
+    const media = encodes
+        ? {
+            mediaBudget: opts.mediaBudget ?? DEFAULT_MEDIA_BUDGET,
+            mediaTime: opts.mediaTime ?? DEFAULT_MEDIA_TIME,
+            videoBar: opts.videoBar ?? DEFAULT_VIDEO_BAR,
+            videoStillBar: opts.videoStillBar ?? DEFAULT_VIDEO_STILL_BAR,
+            maxVideoWidths: opts.maxVideoWidths ?? SCAN_MAX_VIDEO_WIDTHS,
+            ffmpeg,
+        }
+        : {};
     return {
+        ...media,
         imgtuneVersion: IMGTUNE_VERSION,
         aggressive: opts.aggressive,
         quality: opts.quality,
@@ -2156,7 +2446,9 @@ function referenceViewportName(viewports) {
     return viewports.find((v) => v.name === "iphone-15")?.name ?? viewports.find((v) => v.mobile)?.name ?? viewports[0].name;
 }
 /** Turns the observations of one page into the report. Fetches and local encodes happen here. */
-export async function analysePage(ctx, observations, base) {
+export async function analysePage(ctx, input, base) {
+    // A fetched video poster is measured as an image, sized to its video's box (see video-analysis.ts).
+    const observations = withPosterImages(input);
     const refName = referenceViewportName(observations.map((o) => o.viewport));
     const instances = [];
     for (const obs of observations) {
@@ -2281,9 +2573,12 @@ export async function analysePage(ctx, observations, base) {
         refName,
         sources: bgSources,
     });
+    const videoSources = await resolveVideoSources(ctx, input);
+    const videos = videoRecordsOf(ctx.pageUrl, input, fullBytesOf(input), "scan", ctx.maxVideoWidths ?? SCAN_MAX_VIDEO_WIDTHS, videoSources);
     return {
         ...base,
         nextjs: observations.some((o) => o.nextjs),
+        ...(videos.length > 0 ? { videos } : {}),
         perViewport,
         page: ctx.aggressive ? { ...withoutAggressive, aggressiveExactEstPct } : withoutAggressive,
         groups: measure("aggregate", () => groupReports(instances, observations.length)),
@@ -2455,6 +2750,7 @@ async function scanPage(browser, run, pageUrl, robotsFor) {
 function analysisContextOf(run, pageUrl) {
     return {
         pageUrl,
+        maxVideoWidths: run.maxVideoWidths,
         fetcher: run.fetcher,
         allowPrivate: isLocalTarget(pageUrl),
         deps: run.deps,
@@ -2482,13 +2778,13 @@ function stagedMeasure(run, stage, pageUrl, described, live) {
                 return;
             const staged = [];
             for (const obs of pending) {
-                const { responses, ...rest } = obs;
+                const { responses, media, ...rest } = obs;
                 const records = [];
                 for (const [url, record] of responses) {
                     const { buffer, ...meta } = record;
                     records.push({ url, record: meta, blob: buffer === undefined ? undefined : await putBlob(stage.dir, buffer) });
                 }
-                staged.push({ ...rest, responses: records });
+                staged.push({ ...rest, responses: records, ...(media !== undefined ? { media: [...media] } : {}) });
             }
             const state = { version: 1, url: pageUrl, options: stage.options, described, observations: staged };
             await writeStagedJson(stage.dir, file, state);
@@ -2515,12 +2811,12 @@ async function unstagedObservations(stageDir, file) {
         throw new Error(`staged page is missing or unreadable: ${safeText(file)}`);
     const observations = [];
     for (const staged of state.observations) {
-        const { responses: records, ...rest } = staged;
+        const { responses: records, media, ...rest } = staged;
         const responses = new Map();
         for (const { url, record, blob } of records) {
             responses.set(url, blob === undefined ? { ...record } : { ...record, buffer: await getBlob(stageDir, blob) });
         }
-        observations.push({ ...rest, responses });
+        observations.push({ ...rest, responses, ...(media !== undefined ? { media: new Map(media) } : {}) });
     }
     return observations;
 }
@@ -2592,6 +2888,7 @@ async function withBrowser(opts, gpu, body) {
             storageState: opts.storageState,
             thirdParty: opts.thirdParty ?? DEFAULT_THIRD_PARTY,
             qualityFor: opts.qualityFor,
+            maxVideoWidths: opts.maxVideoWidths,
             projectDir: opts.cwd,
             projectRoot: opts.root,
             viewportConcurrency: opts.viewportConcurrency ?? VIEWPORT_CONCURRENCY,
@@ -2650,6 +2947,67 @@ export function progressLine(done, total) {
     const status = last.status === "ok" ? "" : ` (${last.status})`;
     return `page ${done.length}/${total} done${status} · ${(measured / (1024 * 1024)).toFixed(1)} MB measured · est. ${estimated.toFixed(0)}%`;
 }
+/**
+ * The media phase of a run (see media-phase.ts), run once after every page is measured. Each asset is first checked against
+ * the third-party policy from the page it was found on: a blocked one is never fetched, read or proxied. The rest go to
+ * runMediaPhase (see mediaPhaseFor).
+ */
+async function runMediaFor(assets, run, opts, urls) {
+    const { allowed, blocked } = partitionByPolicy(assets, run.thirdParty);
+    const results = await mediaPhaseFor(allowed, run, opts, urls);
+    return blocked.size > 0 ? { ...results, blocked } : results;
+}
+/**
+ * The media phase for the assets the policy allows. The videos are read through an egress proxy started for the phase,
+ * which allows private destinations only when every scanned URL is local. The length of every video URL is probed first,
+ * whatever the settings (a click-to-play video's per-play bytes need it, and no ffmpeg); the budget ranks the videos by
+ * that length. A survey or a scan with quality off encodes nothing, and each asset says so. Never throws.
+ */
+async function mediaPhaseFor(assets, run, opts, urls) {
+    if (assets.length === 0)
+        return { byKey: new Map() };
+    const allowPrivate = urls.length > 0 && urls.every((url) => isLocalTarget(url));
+    let proxy;
+    // Declared outside the try: a media error after the probe keeps the lengths, so a click-to-play video's per-play bytes stay.
+    let lengths = new Map();
+    try {
+        const videoUrls = assets.filter((asset) => asset.kind === "video").map((asset) => asset.url);
+        if (videoUrls.length > 0) {
+            proxy = await startEgressProxy({ resolver: run.resolver, allowPrivate, connectAddress: run.connectAddress });
+            lengths = await probeLengths(assets.filter((asset) => asset.kind === "video").map((asset) => ({ url: asset.url, page: asset.page })), proxy.url, { thirdParty: run.thirdParty });
+        }
+        const sized = assets.map((asset) => refineAssetLength(asset, lengths.get(asset.url)));
+        if (opts.quality !== true || opts.survey === true) {
+            return { ...skippedMedia(sized, opts.survey === true ? "survey" : "quality off"), lengths };
+        }
+        return await runMediaPhase(sized, {
+            budget: opts.mediaBudget ?? DEFAULT_MEDIA_BUDGET,
+            timeS: opts.mediaTime ?? DEFAULT_MEDIA_TIME,
+            vmafBar: opts.videoBar ?? DEFAULT_VIDEO_BAR,
+            stillBar: opts.videoStillBar ?? DEFAULT_VIDEO_STILL_BAR,
+            survey: false,
+            workDir: join(resolve(opts.outDir), ".media-work"),
+            cache: run.deps.cache,
+            log: opts.log,
+            proxy: proxy?.url,
+            score: run.deps.score,
+            scorerId: run.deps.scorerId,
+            // The media is encoded on the CPU unless --gpu-encode asks for the GPUs: the --gpu-device list, else GPU 0.
+            gpus: opts.gpuEncode === true ? (opts.gpu?.devices ?? [0]) : undefined,
+            signal: opts.signal,
+            thirdParty: run.thirdParty,
+        }, {
+            fetch: (url, maxBytes, hop) => run.fetcher.get(url, { maxBytes: maxBytes ?? MAX_IMAGE_BYTES, allowPrivate, allowHop: hop?.allowHop, allowHopKey: hop?.page }),
+        }).then((results) => ({ ...results, lengths }));
+    }
+    catch (err) {
+        const message = (err instanceof Error ? err.message : String(err)).replace(/\s+/g, " ").slice(0, 200);
+        return { ...skippedMedia(assets, `media error: ${message}`), lengths };
+    }
+    finally {
+        await proxy?.close();
+    }
+}
 /**
  * Scans the pages in two phases, with a progress line after each. Phase 1 measures every page (up to `pageConcurrency` in
  * flight at once on the shared browser; pages start in input order) and collects the estimate jobs they need, so no
@@ -2665,7 +3023,8 @@ export function progressLine(done, total) {
 export async function runScan(urls, opts) {
     return withScanRun(opts, async (browser, run, robotsFor) => {
         await mkdir(opts.outDir, { recursive: true });
-        const options = recordOptionsOf(opts);
+        // Whether ffmpeg is installed decides whether the media encodes run, so it is part of the record (see recordOptionsOf).
+        const options = recordOptionsOf(opts, (await probeFfmpeg()).ffmpeg);
         run.stage = { dir: stageDirOf(opts.outDir), options };
         const results = new Array(urls.length);
         // The finished pages in finishing order: the progress line counts them.
@@ -2673,6 +3032,8 @@ export async function runScan(urls, opts) {
         const registry = new EstimateRegistry();
         const collector = registry.collector();
         const measured = [];
+        // The media assets (videos and animated images) of every measured page, from its collecting pass (see media-phase.ts).
+        const mediaAssets = [];
         let started = 0;
         let images = 0;
         let measuredCount = 0;
@@ -2697,7 +3058,8 @@ export async function runScan(urls, opts) {
             // A page measured by an interrupted run: its estimates only. Its requests are collected as a measured page's are.
             const staged = opts.resume ? await resumeStaged(run, url) : undefined;
             if (staged !== undefined) {
-                await staged.page.analyse(collector);
+                const stagedProvisional = await staged.page.analyse(collector);
+                mediaAssets.push(...mediaAssetsOf(stagedProvisional));
                 measured.push({ index, url, page: staged.page });
                 images += staged.images;
                 measuredCount++;
@@ -2719,6 +3081,7 @@ export async function runScan(urls, opts) {
             // Staged as soon as it is measured: the collecting pass reads it back from the stage, so no bytes are held meanwhile.
             await outcome.stage?.();
             const provisional = await outcome.analyse(collector);
+            mediaAssets.push(...mediaAssetsOf(provisional));
             await outcome.countImages?.(provisional.counts?.images ?? 0);
             measured.push({ index, url, page: outcome });
             images += provisional.counts?.images ?? 0;
@@ -2731,15 +3094,25 @@ export async function runScan(urls, opts) {
             const counts = registry.counts();
             opts.log(`estimates: ${counts.unique} unique of ${counts.requests}, ${counts.skipped} skipped`);
             await registry.runJobs(QUALITY_PARALLEL);
+            // Each page's image analysis is written as soon as its estimates are in, with no media results and no completeness
+            // marker: a crash or Ctrl-C during the long media phase keeps it (--resume scans it again and readers skip it).
+            const analysedPages = [];
             for (const { index, url, page } of measured) {
                 const tally = { fallbacks: 0 };
                 const analysed = await page.analyse(registry.reader(tally));
-                const result = withBroken({ ...analysed, complete: true, options, scorer: scorerOf(run.gpu, tally.fallbacks) }, opts.expectImages?.(url));
+                await writePage(url, withBroken({ ...analysed, options, scorer: scorerOf(run.gpu, tally.fallbacks) }, opts.expectImages?.(url)));
+                analysedPages.push({ index, url, page, analysed, fallbacks: tally.fallbacks });
+                opts.log(progressLine([...finished, ...analysedPages.map((p) => p.analysed)], urls.length));
+            }
+            // The media phase runs once for every page's assets (see runMediaFor); each page is then written again, complete.
+            const media = await runMediaFor(mediaAssets, run, opts, urls);
+            for (const { index, url, page, analysed, fallbacks } of analysedPages) {
+                const withMedia = attachMediaResults(analysed, media, { quality: opts.quality, survey: opts.survey === true });
+                const result = withBroken({ ...withMedia, complete: true, options, scorer: scorerOf(run.gpu, fallbacks) }, opts.expectImages?.(url));
                 results[index] = result;
                 finished.push(result);
                 await writePage(url, result);
                 await page.finish?.();
-                opts.log(progressLine(finished, urls.length));
             }
         }
         // Every measured page is complete now: the stage's blobs go with it (an interrupted run never gets here).
@@ -2791,7 +3164,7 @@ export async function observeLight(pageUrl, opts) {
     }, async (browser, run, robotsFor) => {
         const url = new URL(pageUrl);
         const allowPrivate = isLocalTarget(pageUrl);
-        const empty = (status, error) => ({ status, error, observations: [], resolved: new Map() });
+        const empty = (status, error) => ({ status, error, observations: [], resolved: new Map(), resolvedVideos: new Map() });
         const robots = await checkRobots(pageUrl, allowPrivate, () => robotsFor(url.origin, false), run.ignoreRobots);
         if (!robots.allowed)
             return empty("robots", "robots.txt disallows the page");
@@ -2799,7 +3172,7 @@ export async function observeLight(pageUrl, opts) {
             run.log(robotsIgnoredWarning(pageUrl));
         const policy = { resolver: run.resolver, allowPrivate, connectAddress: run.connectAddress };
         const guard = { isBlocked: (u) => run.fetcher.hostIsBlocked(u, allowPrivate), policy, thirdParty: run.thirdParty };
-        const outcomes = await settleLimit(run.viewports, VIEWPORT_CONCURRENCY, (viewport) => observeViewport(browser, pageUrl, viewport, guard, run.loadCapMs, undefined, true, (img) => opts.wanted(img, pageUrl)));
+        const outcomes = await settleLimit(run.viewports, VIEWPORT_CONCURRENCY, (viewport) => observeViewport(browser, pageUrl, viewport, guard, run.loadCapMs, undefined, true, (img) => opts.wanted(img, pageUrl), undefined, opts.videos === true));
         const observations = [];
         for (const [index, outcome] of outcomes.entries()) {
             const viewport = run.viewports[index];
@@ -2826,12 +3199,15 @@ export async function observeLight(pageUrl, opts) {
             projectRoot: run.projectRoot,
         };
         const resolved = new Map();
+        const resolvedVideos = new Map();
         for (const obs of observations) {
             const part = await resolveSources(ctx, [obs], (img) => opts.wanted(img, pageUrl));
             for (const [img, source] of part)
                 resolved.set(img, source);
+            for (const [video, source] of await resolveVideoSources(ctx, [obs]))
+                resolvedVideos.set(video, source);
         }
-        return { status: "ok", observations, resolved };
+        return { status: "ok", observations, resolved, resolvedVideos };
     });
 }
 // ---------------------------------------------------------------------------------------------------------------------
@@ -2883,6 +3259,14 @@ export function renderPage(result, aggressive, hintsFile) {
             lines.push(`    ${sizes} -> ${suggested}  saves ${kb(g.savedBytes)}/view${loader}${hint}${qualityHint}`);
         }
     }
+    // The Video section: the page's <video> files, per view and per play, with each one's encode or the reason it has none.
+    const videos = result.videos ?? [];
+    const totals = videoTotalsLine(videos);
+    if (totals !== undefined) {
+        lines.push(`  ${totals}`);
+        for (const video of videos)
+            lines.push(`    ${videoRowOf(video, (text) => JSON.stringify(safeText(text)))}`);
+    }
     return lines;
 }
 /** Per-site line for hosts with two or more scanned pages. */
@@ -2894,6 +3278,10 @@ export function renderScan(results, aggressive, hintsFile, maxQualities) {
     const note = scorerNote(results);
     if (note !== undefined)
         lines.push(note, "");
+    // The media phase's note (no ffmpeg, a failed encode run) is printed once, at the top, not once per page.
+    const media = results.find((r) => r.mediaNote !== undefined)?.mediaNote;
+    if (media !== undefined)
+        lines.push(safeText(media), "");
     for (const result of results)
         lines.push(...renderPage(result, aggressive, hintsFile?.(result)), "");
     const byHost = new Map();
@@ -2974,6 +3362,9 @@ function markdownBody(results, aggressive, withHints, maxQualities) {
     const note = scorerNote(results);
     if (note !== undefined)
         lines.push(note, "");
+    const media = results.find((r) => r.mediaNote !== undefined)?.mediaNote;
+    if (media !== undefined)
+        lines.push(mdText(media), "");
     lines.push(mdRow(head, width), mdRow(align, width));
     for (const result of results) {
         const label = pageLabel(result.url);
@@ -2993,21 +3384,28 @@ function markdownBody(results, aggressive, withHints, maxQualities) {
             continue;
         // The LCP line goes above the page's table: the image that the first paint waits for comes first.
         const lcp = lcpLinesOf(result, mdCode);
-        if (lcp.length === 0 && result.groups.length === 0)
+        const videos = result.videos ?? [];
+        if (lcp.length === 0 && result.groups.length === 0 && videos.length === 0)
             continue;
         lines.push("", `### ${pageLabel(result.url)}`, "");
         for (const line of lcp)
             lines.push(line, "");
-        if (result.groups.length === 0)
-            continue;
-        lines.push(mdRow(["current sizes", "suggested", "saves KB/view", "loader", "hint"], 5));
-        lines.push(mdRow(["---", "---", "---:", "---", "---"], 5));
-        for (const g of result.groups.slice(0, SUMMARY_GROUPS)) {
-            const current = g.sizes === undefined ? "no sizes" : mdCode(g.sizes);
-            const suggested = g.suggestedSizes === undefined ? "-" : mdCode(g.suggestedSizes);
-            const loader = g.loader ? mdCode(g.loader) : "-";
-            const hint = [g.hint, g.qualityHint].filter((h) => h !== undefined).map((h) => mdCode(h)).join("; ");
-            lines.push(mdRow([current, suggested, `${kbNumber(g.savedBytes)}${g.estApprox === true ? APPROX_MARK : ""}`, loader, hint || "-"], 5));
+        if (result.groups.length > 0) {
+            lines.push(mdRow(["current sizes", "suggested", "saves KB/view", "loader", "hint"], 5));
+            lines.push(mdRow(["---", "---", "---:", "---", "---"], 5));
+            for (const g of result.groups.slice(0, SUMMARY_GROUPS)) {
+                const current = g.sizes === undefined ? "no sizes" : mdCode(g.sizes);
+                const suggested = g.suggestedSizes === undefined ? "-" : mdCode(g.suggestedSizes);
+                const loader = g.loader ? mdCode(g.loader) : "-";
+                const hint = [g.hint, g.qualityHint].filter((h) => h !== undefined).map((h) => mdCode(h)).join("; ");
+                lines.push(mdRow([current, suggested, `${kbNumber(g.savedBytes)}${g.estApprox === true ? APPROX_MARK : ""}`, loader, hint || "-"], 5));
+            }
+        }
+        const totals = videoTotalsLine(videos);
+        if (totals !== undefined) {
+            lines.push("", totals, "");
+            for (const video of videos)
+                lines.push(`- ${mdCode(videoRowOf(video, (text) => JSON.stringify(safeText(text))))}`);
         }
     }
     const plan = planQualityCap(results, maxQualities);
@@ -3093,7 +3491,7 @@ export async function rootOf(root, cwd) {
     return absolute;
 }
 /** `imgtune scan`: the arguments after `scan`. The JSON files are written to --out; --markdown and --summary-json too. */
-export async function scanCommand(argv, cwd, log) {
+export async function scanCommand(argv, cwd, log, signal) {
     const args = parseScanArgs(argv);
     const plan = scanPlan(args);
     const viewports = DEFAULT_VIEWPORTS.filter((v) => !plan.viewports || plan.viewports.includes(v.name)).map((v) => ({ ...v }));
@@ -3120,6 +3518,7 @@ export async function scanCommand(argv, cwd, log) {
         outDir: resolve(cwd, args.out),
         cwd,
         root,
+        signal,
         aggressive: args.aggressive,
         quality: plan.quality,
         viewports,
@@ -3130,11 +3529,17 @@ export async function scanCommand(argv, cwd, log) {
         resume: args.resume === true,
         maxPages: args.maxPages,
         maxImages: args.maxImages,
+        mediaBudget: args.mediaBudget,
+        mediaTime: args.mediaTime,
+        videoBar: args.videoBar,
+        videoStillBar: args.videoStillBar,
+        maxVideoWidths: args.maxVideoWidths,
         pageConcurrency: plan.pageConcurrency,
         idleTimeoutMs: plan.idleTimeoutMs,
         sharedLoads: args.sharedLoads === true,
         storageState,
         gpu: args.gpu,
+        gpuEncode: args.gpuEncode,
         cache: args.noCache !== true,
         report,
         thirdParty: args.thirdParty,