@vanillaskyai/video 0.9.0 → 0.10.1

package/CHANGELOG.md

@@ -4,6 +4,25 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
 
 ## Unreleased
 
+## 0.10.1
+
+- Continue narration through failed built-in media using the authored fallback or the existing graphic on black. Keep the recovery anchor after URL resolution, and observe actual mounted images for photo readiness.
+
+- Match planning, narration, visual progression and endings to explanations, fiction, comedy, imaginative requests and practical answers. Remove conflicting instructions that forced a factual arc, fixed sentence length or a different template for every beat.
+- Ask follow-up generation to exclude questions already answered by the full narration, including paraphrases, and to preserve the conversation’s intent.
+
+## 0.10.0
+
+### Breaking
+
+- Remove `focusCards` from the built-in catalog and generated source templates, as requested. Existing callers must replace it with narration over `cinemaMedia`, or an appropriate comparison/timeline when supported by their content. Persisted videos using that ID must be regenerated before playback with the new catalog.
+
+### Changed
+
+- Opening narration advances into the first shot and body. Exact repeated introductory sentences are removed without additional model calls or startup waits.
+- Prefer relevant footage over repeated graphic scenes; use no more than one explanatory overlay in a typical thirty-second answer. Comparison, key figure, quote and timeline can now use optional host-resolved media with a contrast scrim and soft text shadows. Black remains the fallback; chapter titles stay black.
+
+
 ## 0.9.0
 
 - Continue video playback with subtitles when native browser speech cannot start, without weakening generated-audio readiness or counting paused time toward the fallback.

package/dist/{builtin-server-HW6HGXCZ.js → builtin-server-W4PLJUZ5.js}

@@ -1,7 +1,7 @@
 import {
   BUILTIN_SERVER_TEMPLATE_KIT
-} from "./chunk-MQILEEXC.js";
-import "./chunk-LH4BPALA.js";
+} from "./chunk-IR44XKBI.js";
+import "./chunk-IIN5M5HW.js";
 import "./chunk-2E6T633S.js";
 export {
   BUILTIN_SERVER_TEMPLATE_KIT

package/dist/check-runtime.js

@@ -1,7 +1,7 @@
 import {
   VideoFrame
-} from "./chunk-3ZTEFJIR.js";
-import "./chunk-UDIODEDK.js";
+} from "./chunk-6KZGF63O.js";
+import "./chunk-224QNWRA.js";
 import "./chunk-TVIU23OM.js";
 import "./chunk-SPVTJH3F.js";
 import "./chunk-R3XAOMKP.js";

package/dist/{chunk-UDIODEDK.js → chunk-224QNWRA.js}

@@ -19,8 +19,12 @@ function resolveMediaType(mediaType, mediaUrl) {
   if (mediaType === "photo") return "photo";
   return mediaUrl && isVideoUrl(mediaUrl) ? "video" : "photo";
 }
+function hasSceneMedia(variables) {
+  return String(variables.mediaUrl || "").trim() !== "" && String(variables.mediaType || "auto") !== "gradient";
+}
 
 export {
   limitsConcurrentVideoDecoders,
-  resolveMediaType
+  resolveMediaType,
+  hasSceneMedia
 };

package/dist/{chunk-MXEYPK7M.js → chunk-4ZJLPHBV.js}

@@ -80,31 +80,6 @@ var BUILTIN_TEMPLATE_SCHEMAS = {
     ],
     "additionalProperties": false
   },
-  "focusCards": {
-    "type": "object",
-    "properties": {
-      "items": {
-        "type": "array",
-        "minItems": 2,
-        "maxItems": 4,
-        "items": {
-          "type": "string",
-          "minLength": 1,
-          "maxLength": 55
-        },
-        "default": [
-          "Listen closely",
-          "Notice the pattern",
-          "Make room for change"
-        ],
-        "description": "2\u20134 parallel phrases, about 2\u20136 words each; no heading or numbering."
-      }
-    },
-    "required": [
-      "items"
-    ],
-    "additionalProperties": false
-  },
   "editorialTimeline": {
     "type": "object",
     "properties": {
@@ -138,12 +113,59 @@ var BUILTIN_TEMPLATE_SCHEMAS = {
           }
         ],
         "description": "3\u20135 ordered events or actions, each with one short label; no dates."
+      },
+      "mediaKeyword": {
+        "type": "string",
+        "format": "stock-media-keyword",
+        "minLength": 1,
+        "maxLength": 80,
+        "description": "2\u20138 word literal subject/action search intent, maximum 80 characters. Host resolves URLs.",
+        "examples": [
+          "Ocean waves breaking on a rocky shore"
+        ]
+      },
+      "mediaUrl": {
+        "type": "string",
+        "format": "uri",
+        "description": "Host-only approved photo or video URL.",
+        "default": ""
+      },
+      "mediaType": {
+        "type": "string",
+        "enum": [
+          "photo",
+          "video"
+        ],
+        "default": "video",
+        "description": "Host-resolved asset kind."
+      },
+      "mediaPoster": {
+        "type": "string",
+        "format": "uri",
+        "description": "Host-only approved poster URL for video decoding.",
+        "default": ""
+      },
+      "shotDirection": {
+        "type": "string",
+        "maxLength": 220,
+        "description": "Optional action, framing and continuity for generation. Preserve the subject; do not request rendered text."
+      },
+      "mediaSource": {
+        "type": "string",
+        "enum": [
+          "generate",
+          "stock"
+        ],
+        "description": "Generate distinctive illustrative shots; use approved stock for familiar observable subjects."
       }
     },
     "required": [
       "events"
     ],
-    "additionalProperties": false
+    "additionalProperties": false,
+    "x-vanillasky": {
+      "allowsStockMedia": true
+    }
   },
   "mobileMessage": {
     "type": "object",
@@ -239,13 +261,60 @@ var BUILTIN_TEMPLATE_SCHEMAS = {
         "maxLength": 60,
         "default": "More room to think",
         "description": "Second real alternative, parallel to the first."
+      },
+      "mediaKeyword": {
+        "type": "string",
+        "format": "stock-media-keyword",
+        "minLength": 1,
+        "maxLength": 80,
+        "description": "2\u20138 word literal subject/action search intent, maximum 80 characters. Host resolves URLs.",
+        "examples": [
+          "Ocean waves breaking on a rocky shore"
+        ]
+      },
+      "mediaUrl": {
+        "type": "string",
+        "format": "uri",
+        "description": "Host-only approved photo or video URL.",
+        "default": ""
+      },
+      "mediaType": {
+        "type": "string",
+        "enum": [
+          "photo",
+          "video"
+        ],
+        "default": "video",
+        "description": "Host-resolved asset kind."
+      },
+      "mediaPoster": {
+        "type": "string",
+        "format": "uri",
+        "description": "Host-only approved poster URL for video decoding.",
+        "default": ""
+      },
+      "shotDirection": {
+        "type": "string",
+        "maxLength": 220,
+        "description": "Optional action, framing and continuity for generation. Preserve the subject; do not request rendered text."
+      },
+      "mediaSource": {
+        "type": "string",
+        "enum": [
+          "generate",
+          "stock"
+        ],
+        "description": "Generate distinctive illustrative shots; use approved stock for familiar observable subjects."
       }
     },
     "required": [
       "leftText",
       "rightText"
     ],
-    "additionalProperties": false
+    "additionalProperties": false,
+    "x-vanillasky": {
+      "allowsStockMedia": true
+    }
   },
   "quote": {
     "type": "object",
@@ -268,13 +337,60 @@ var BUILTIN_TEMPLATE_SCHEMAS = {
           "Illustrative example"
         ],
         "description": "Grounded attribution belonging to these exact quoted words."
+      },
+      "mediaKeyword": {
+        "type": "string",
+        "format": "stock-media-keyword",
+        "minLength": 1,
+        "maxLength": 80,
+        "description": "2\u20138 word literal subject/action search intent, maximum 80 characters. Host resolves URLs.",
+        "examples": [
+          "Ocean waves breaking on a rocky shore"
+        ]
+      },
+      "mediaUrl": {
+        "type": "string",
+        "format": "uri",
+        "description": "Host-only approved photo or video URL.",
+        "default": ""
+      },
+      "mediaType": {
+        "type": "string",
+        "enum": [
+          "photo",
+          "video"
+        ],
+        "default": "video",
+        "description": "Host-resolved asset kind."
+      },
+      "mediaPoster": {
+        "type": "string",
+        "format": "uri",
+        "description": "Host-only approved poster URL for video decoding.",
+        "default": ""
+      },
+      "shotDirection": {
+        "type": "string",
+        "maxLength": 220,
+        "description": "Optional action, framing and continuity for generation. Preserve the subject; do not request rendered text."
+      },
+      "mediaSource": {
+        "type": "string",
+        "enum": [
+          "generate",
+          "stock"
+        ],
+        "description": "Generate distinctive illustrative shots; use approved stock for familiar observable subjects."
       }
     },
     "required": [
       "quote",
       "attribution"
     ],
-    "additionalProperties": false
+    "additionalProperties": false,
+    "x-vanillasky": {
+      "allowsStockMedia": true
+    }
   },
   "keyFigure": {
     "type": "object",
@@ -297,6 +413,50 @@ var BUILTIN_TEMPLATE_SCHEMAS = {
           "Illustrative example"
         ],
         "description": "Exactly one short label identifying the quantity and its context."
+      },
+      "mediaKeyword": {
+        "type": "string",
+        "format": "stock-media-keyword",
+        "minLength": 1,
+        "maxLength": 80,
+        "description": "2\u20138 word literal subject/action search intent, maximum 80 characters. Host resolves URLs.",
+        "examples": [
+          "Ocean waves breaking on a rocky shore"
+        ]
+      },
+      "mediaUrl": {
+        "type": "string",
+        "format": "uri",
+        "description": "Host-only approved photo or video URL.",
+        "default": ""
+      },
+      "mediaType": {
+        "type": "string",
+        "enum": [
+          "photo",
+          "video"
+        ],
+        "default": "video",
+        "description": "Host-resolved asset kind."
+      },
+      "mediaPoster": {
+        "type": "string",
+        "format": "uri",
+        "description": "Host-only approved poster URL for video decoding.",
+        "default": ""
+      },
+      "shotDirection": {
+        "type": "string",
+        "maxLength": 220,
+        "description": "Optional action, framing and continuity for generation. Preserve the subject; do not request rendered text."
+      },
+      "mediaSource": {
+        "type": "string",
+        "enum": [
+          "generate",
+          "stock"
+        ],
+        "description": "Generate distinctive illustrative shots; use approved stock for familiar observable subjects."
       }
     },
     "required": [
@@ -305,7 +465,8 @@ var BUILTIN_TEMPLATE_SCHEMAS = {
     ],
     "additionalProperties": false,
     "x-vanillasky": {
-      "requiresStat": true
+      "requiresStat": true,
+      "allowsStockMedia": true
     }
   }
 };
@@ -369,38 +530,9 @@ var BUILTIN_TEMPLATE_MANIFEST = [
     },
     schema: BUILTIN_TEMPLATE_SCHEMAS.chapterTitle
   },
-  {
-    "label": "Focus cards",
-    "description": "Two to four short phrases fade in sequentially on black; no boxes or heading.",
-    "usesGlobalTextEffect": false,
-    "usesGlobalTransition": false,
-    "usesGlobalBackgroundEffect": false,
-    "textCanvas": "tight",
-    "id": "focusCards",
-    "family": "Explainers",
-    "jobs": [
-      "setup",
-      "proof"
-    ],
-    "register": "card-led",
-    "useWhen": "Two to four short parallel points support an explanation. ",
-    "avoidWhen": "The points require an order, long paragraphs, numerical data or additional images to make sense.",
-    "minDuration": 4,
-    "preferredDuration": 5,
-    "timing": {
-      "contentFields": [
-        "items"
-      ],
-      "contentUnit": "items",
-      "revealSeconds": 2.4,
-      "holdSeconds": 1.8,
-      "exitSeconds": 0
-    },
-    schema: BUILTIN_TEMPLATE_SCHEMAS.focusCards
-  },
   {
     "label": "Timeline",
-    "description": "Three to five events on a fine continuous line on black; without dates.",
+    "description": "Three to five events on a fine continuous line over relevant media or black; without dates.",
     "usesGlobalTextEffect": false,
     "usesGlobalTransition": false,
     "usesGlobalBackgroundEffect": false,
@@ -458,7 +590,7 @@ var BUILTIN_TEMPLATE_MANIFEST = [
   },
   {
     "label": "Comparison",
-    "description": "Two short statements with equal weight on black, side by side or stacked in portrait.",
+    "description": "Two short statements with equal weight over relevant media or black, side by side or stacked in portrait.",
     "usesGlobalTextEffect": false,
     "usesGlobalTransition": false,
     "usesGlobalBackgroundEffect": false,
@@ -489,7 +621,7 @@ var BUILTIN_TEMPLATE_MANIFEST = [
   },
   {
     "label": "Quote",
-    "description": "A short exact quotation with a legible attribution on black.",
+    "description": "A short exact quotation with a legible attribution over relevant media or black.",
     "usesGlobalTextEffect": false,
     "usesGlobalTransition": false,
     "usesGlobalBackgroundEffect": false,
@@ -518,7 +650,7 @@ var BUILTIN_TEMPLATE_MANIFEST = [
   },
   {
     "label": "Key figure",
-    "description": "One supplied figure with one short label on black.",
+    "description": "One supplied figure with one short label over relevant media or black.",
     "usesGlobalTextEffect": false,
     "usesGlobalTransition": false,
     "usesGlobalBackgroundEffect": false,

package/dist/{chunk-ZDJNFA52.js → chunk-5BSJLT6H.js}

@@ -114,15 +114,15 @@ function buildVideoUserPrompt(input, openingDurationSec = 0) {
       "Add that scene before resolving any stock or supplied asset. Resolve media as part of each complete later body scene."
     ],
     "Use only claims supported by the factual basis permitted by the trusted system prompt.",
-    "Select the most decision-relevant grounded takeaways that fit the duration; represent each selected takeaway once before completing the response.",
+    "Develop the requested answer within the duration: preserve its mechanism, essential actions, story resolution or punchline. A short prompt can need several distinct visual beats; input length is not the answer length.",
     "For a long source, summarize instead of attempting to represent every fact, unless the creative instructions explicitly request complete fact coverage that fits the duration.",
     "When selecting claims from the raw input, preserve their exact wording and numbers. Preserve qualifiers, units, denominators, ranges, and comparison direction; for example, do not shorten 4.8 out of 5 to 4.8.",
-    "Choose the scene count from the distinct grounded material and the duration budget. Use fewer scenes for sparse input; continue beyond five when rich input warrants it and timing allows.",
+    "Choose the scene count from the requested intent, visual progression and duration budget. A joke can be brief; a practical sequence or imaginative story may need more development. Do not stop while an essential step or payoff is missing.",
     "If the creative instructions explicitly require one separate scene per named item, release, section, or list entry, do not merge, group, or omit those required items. Keep related required scenes adjacent in a coherent progression while preserving each item as its own scene.",
     "Before emitting, verify that the explicitly requested structure can fit readably within the maximum duration. If it cannot, preserve readability and the requested separation for the scenes that fit, then finish with plan.complete using finishReason length rather than silently changing the structure.",
-    "For ordinary multi-fact input, form at least three distinct beats: hook, comprehension, and payoff. Use only one or two beats when the source genuinely contains no more than two independent grounded takeaways. This is a narrative guideline, never permission to repeat facts or add filler.",
-    "Emit exactly one final scene.add with placement closer. Generate a short grounded conclusion that answers the story's so-what; it must not repeat hook language or imply another scene follows.",
-    "Use a different suitable template for each body scene when the catalog supports it.",
+    "Before plan.complete, check that the answer fulfills the actual request. Do not mistake a hook and a single supporting statement for a complete explanation, or explain a joke after its punchline.",
+    "Emit exactly one final scene.add with placement closer. Land the requested ending without repeating the opening or implying another scene follows.",
+    "Reuse the same suitable template when it serves successive beats. Vary the subject action, shot scale, perspective or purposeful detail, not the template merely for variety.",
     "Never add filler to satisfy a count or diversity target.",
     input.suppliedMedia?.length ? input.opening === false ? "Select zero or more relevant opaque supplied-media references for visible scenes. Never invent or transform a reference. Only emit mediaKeyword when the trusted system catalog explicitly exposes it. Never invent mediaUrl or mediaPoster." : "Select zero or more relevant opaque supplied-media references for visible later scenes. Never invent or transform a reference. Only emit mediaKeyword when the trusted system catalog explicitly exposes it, and only on later scenes. Never invent mediaUrl or mediaPoster." : input.opening === false ? "No supplied media URL is available. Use asset-free templates unless the trusted system catalog explicitly permits host-resolved media intent, which may begin on the first scene. Only emit mediaKeyword when the trusted system catalog explicitly exposes it. Never invent mediaUrl or mediaPoster." : "No supplied media URL is available. Use asset-free templates unless the trusted system catalog explicitly permits host-resolved media intent. Only emit mediaKeyword when the trusted system catalog explicitly exposes it, and only on later scenes. Never invent mediaUrl or mediaPoster.",
     "",
@@ -691,7 +691,7 @@ function createVideo(rawInput, options) {
           position
         }));
       }
-      const systemPrompt = options.systemPrompt ?? (await import("./system-prompt-SYRT5DWM.js")).createVideoSystemPrompt(input.knowledgeMode);
+      const systemPrompt = options.systemPrompt ?? (await import("./system-prompt-AG26KJAA.js")).createVideoSystemPrompt(input.knowledgeMode);
       const context = { request, systemPrompt, userPrompt, initialConfig, signal: controller.signal };
       attachGenerationLifecycleSink(context, lifecycle);
       for await (const untrustedPart of options.generate(context)) {

package/dist/{chunk-G7IZBBWF.js → chunk-5C6HZNHY.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-77VY4O7A.js";
 import {
   resolveMediaType
-} from "./chunk-UDIODEDK.js";
+} from "./chunk-224QNWRA.js";
 import {
   useExternalVideoBackdrop
 } from "./chunk-TVIU23OM.js";
@@ -163,17 +163,22 @@ var SceneBackground = ({
         onError: () => setMediaPaint("failed")
       }
     ) : /* @__PURE__ */ jsx(
-      "div",
+      "img",
       {
+        src: mediaUrl,
+        alt: "",
+        "aria-hidden": "true",
+        draggable: false,
         "data-media-position": mediaPosition,
         style: {
           position: "absolute",
           inset: 0,
           transform: bgTransform.transform,
           transformOrigin: bgTransform.transformOrigin,
-          backgroundImage: `url(${mediaUrl})`,
-          backgroundSize: "cover",
-          backgroundPosition: resolvedPosition
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          objectPosition: resolvedPosition
         }
       }
     )),
@@ -195,14 +200,7 @@ var SceneBackground = ({
   ] });
 };
 
-// src/visual-system/scene-templates/cinema-media.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function MediaScene({ variables, style, width, height, progress, sceneDuration, isPlaying }) {
-  return /* @__PURE__ */ jsx2("div", { "data-template": "cinemaMedia", style: { width, height, position: "relative", overflow: "hidden" }, children: /* @__PURE__ */ jsx2(SceneBackground, { style, width, height, progress, sceneDuration, ...getMediaBackgroundProps(variables), mediaTreatment: "none", backgroundEffect: "none", isPlaying }) });
-}
-var MediaSceneTemplate = MediaScene;
-
 export {
-  MediaScene,
-  MediaSceneTemplate
+  getMediaBackgroundProps,
+  SceneBackground
 };

package/dist/{chunk-3ZTEFJIR.js → chunk-6KZGF63O.js}

@@ -1,7 +1,7 @@
 import {
   limitsConcurrentVideoDecoders,
   resolveMediaType
-} from "./chunk-UDIODEDK.js";
+} from "./chunk-224QNWRA.js";
 import {
   ExternalVideoBackdropProvider,
   resolveDensity
@@ -21,10 +21,12 @@ import { createContext, useContext, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var MountedReadinessContext = createContext(void 0);
 var sceneReadinessKey = (scene) => `${scene.id}\0${String(scene.variables.mediaUrl || "")}`;
-function MountedSceneReadiness({ scene, playing, fallback = false }) {
+function MountedSceneReadiness({ scene, playing, fallback = false, onFailure }) {
   const marker = useRef(null);
   const report = useContext(MountedReadinessContext);
   const key = sceneReadinessKey(scene);
+  const onFailureRef = useRef(onFailure);
+  onFailureRef.current = onFailure;
   useEffect(() => {
     if (!report || !playing) return;
     let stopped = false;
@@ -35,13 +37,14 @@ function MountedSceneReadiness({ scene, playing, fallback = false }) {
     const finish = (error, actualVideoFrame = false) => {
       if (!stopped) {
         stopped = true;
-        report(key, error, actualVideoFrame);
+        if (error && onFailureRef.current) onFailureRef.current();
+        else report(key, error, actualVideoFrame);
       }
     };
     const check = () => {
       if (stopped) return;
       const root = marker.current?.closest("[data-video-frame]");
-      if (fallback && root?.querySelector("[data-scene-fallback]")) {
+      if (fallback && root?.querySelector("[data-scene-fallback]") && !root.querySelector("[data-template-loading]") && document.fonts?.status !== "loading") {
         finish();
         return;
       }
@@ -132,6 +135,7 @@ import {
   lazy,
   Suspense,
   useState,
+  useCallback,
   useEffect as useEffect2,
   useSyncExternalStore
 } from "react";
@@ -269,7 +273,9 @@ function SceneLayer({
   zIndex,
   externalVideoBackdrop
 }) {
-  const template = kit.getTemplate(range.scene.templateId);
+  const mediaFailed = externalVideoBackdrop === "fallback";
+  const recoveryTitle = mediaFailed && range.scene.templateId === "cinemaMedia" && typeof range.scene.variables.fallbackText === "string" ? range.scene.variables.fallbackText : void 0;
+  const template = kit.getTemplate(recoveryTitle ? "chapterTitle" : range.scene.templateId);
   const duration = range.end - range.start;
   return /* @__PURE__ */ jsx2(
     ExternalVideoBackdropProvider,
@@ -281,6 +287,7 @@ function SceneLayer({
         "div",
         {
           "data-scene-layer": layer,
+          "data-scene-fallback": mediaFailed ? "true" : void 0,
           "data-layer-scene-id": range.scene.id,
           "data-layer-template-id": range.scene.templateId,
           "aria-hidden": interactive ? void 0 : true,
@@ -308,7 +315,9 @@ function SceneLayer({
             createElement(template.component, {
               variables: {
                 ...template.defaults ?? getTemplateDefaults(template.schema),
-                ...range.scene.variables
+                ...range.scene.variables,
+                ...mediaFailed ? { mediaUrl: "", mediaPoster: "", mediaType: "gradient" } : {},
+                ...recoveryTitle ? { title: recoveryTitle } : {}
               },
               style: config.style,
               progress,
@@ -344,7 +353,18 @@ function VideoFrame({
   className,
   style
 }) {
-  const [failedPersistentVideo, setFailedPersistentVideo] = useState();
+  const [failedMedia, setFailedMedia] = useState(() => /* @__PURE__ */ new Set());
+  const markMediaFailed = useCallback((key) => {
+    if (!key || !config.scenes.some((scene) => sceneReadinessKey(scene) === key)) return;
+    setFailedMedia((previous) => previous.has(key) ? previous : /* @__PURE__ */ new Set([...previous, key]));
+  }, [config.scenes]);
+  useEffect2(() => {
+    const currentKeys = new Set(config.scenes.map(sceneReadinessKey));
+    setFailedMedia((previous) => {
+      const retained = new Set([...previous].filter((key) => currentKeys.has(key)));
+      return retained.size === previous.size ? previous : retained;
+    });
+  }, [config.scenes]);
   const [readyPersistentVideo, setReadyPersistentVideo] = useState();
   const decoderConstrainedDevice = useDecoderConstraint();
   const timeline = resolveVideoTimeline(config);
@@ -422,7 +442,8 @@ function VideoFrame({
     mediaPosition: String(posterPreparationRange.scene.variables.mediaPosition || "center"),
     backgroundEffect: posterPreparationRange.scene.backgroundEffect ?? config.style.defaultBackgroundEffect
   } : void 0;
-  const persistentVideoFailed = persistentVideoKey !== void 0 && failedPersistentVideo === persistentVideoKey;
+  const activeMediaFailed = failedMedia.has(sceneReadinessKey(active.scene));
+  const persistentVideoFailed = persistentVideoKey !== void 0 && failedMedia.has(persistentVideoKey);
   const persistentVideoReady = persistentVideoRange !== void 0 && (String(persistentVideoRange.scene.variables.mediaPoster || "") !== "" || readyPersistentVideo === persistentVideoKey);
   const persistentVideoMode = persistentVideoFailed ? "fallback" : persistentVideoReady ? "ready" : "pending";
   const mountingNext = Boolean(
@@ -442,6 +463,12 @@ function VideoFrame({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      onErrorCapture: (event) => {
+        const target = event.target;
+        if ((target instanceof HTMLVideoElement || target instanceof HTMLImageElement) && target.getAttribute("src") === active.scene.variables.mediaUrl && supportsExternalVideoBackdrop(activeTemplate) && (target.closest("[data-layer-scene-id]")?.getAttribute("data-layer-scene-id") === active.scene.id || target.closest("[data-persistent-video-scene-id]")?.getAttribute("data-persistent-video-scene-id") === active.scene.id)) {
+          markMediaFailed(sceneReadinessKey(active.scene));
+        }
+      },
       "data-video-frame": "ready",
       "data-scene-id": active.scene.id,
       "data-template-id": active.scene.templateId,
@@ -455,7 +482,15 @@ function VideoFrame({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsx2(MountedSceneReadiness, { scene: active.scene, playing }),
+        /* @__PURE__ */ jsx2(
+          MountedSceneReadiness,
+          {
+            scene: active.scene,
+            playing,
+            fallback: activeMediaFailed,
+            onFailure: sceneHasBackdrop(active) && supportsExternalVideoBackdrop(activeTemplate) && !activeMediaFailed ? () => markMediaFailed(sceneReadinessKey(active.scene)) : void 0
+          }
+        ),
         preparedReadinessRange && /* @__PURE__ */ jsx2(PreparedSceneReadiness, { scene: preparedReadinessRange.scene }),
         /* @__PURE__ */ jsxs(
           "div",
@@ -530,7 +565,7 @@ function VideoFrame({
                         opacity: decoderConstrainedTransition ? blendProgress : 0
                       } : void 0,
                       onReady: () => setReadyPersistentVideo(persistentVideoKey),
-                      onError: () => setFailedPersistentVideo(persistentVideoKey)
+                      onError: () => markMediaFailed(persistentVideoKey)
                     }
                   ) })
                 }
@@ -554,7 +589,7 @@ function VideoFrame({
                     opacity: 1 - blendProgress,
                     interactive: true,
                     zIndex: 1,
-                    externalVideoBackdrop: persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
+                    externalVideoBackdrop: activeMediaFailed ? "fallback" : persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
                   },
                   active.scene.id
                 ),
@@ -598,7 +633,7 @@ function VideoFrame({
                     opacity: 1,
                     interactive: true,
                     zIndex: 1,
-                    externalVideoBackdrop: persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
+                    externalVideoBackdrop: activeMediaFailed ? "fallback" : persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
                   },
                   active.scene.id
                 )