diff --git a/backend/internal/service/canvas_share.go b/backend/internal/service/canvas_share.go
index 7413309f5..6ca57333e 100644
--- a/backend/internal/service/canvas_share.go
+++ b/backend/internal/service/canvas_share.go
@@ -41,7 +41,7 @@ var publicCanvasMetadataKeys = map[string]bool{
 	"audioVoice": true, "audioFormat": true, "audioSpeed": true, "audioInstructions": true,
 	"naturalWidth": true, "naturalHeight": true, "freeResize": true, "isBatchRoot": true,
 	"batchRootId": true, "batchChildIds": true, "batchUsesReferenceImages": true, "primaryImageId": true,
-	"imageBatchExpanded": true, "mimeType": true, "bytes": true, "durationMs": true, "assetTags": true,
+	"imageBatchExpanded": true, "mimeType": true, "bytes": true, "durationMs": true, "hasAudio": true, "assetTags": true,
 	"workflowKind": true, "workflowTitle": true, "workflowDescription": true, "shotIndex": true,
 	"sceneId": true, "characterIds": true, "referenceSetId": true, "referenceAssetNodeIds": true, "assetBindings": true,
 	"characterName": true, "characterPrompt": true, "characterAliases": true, "characterView": true, "characterViewNodeIds": true,
diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx
index fbf8c6733..b8265f145 100644
--- a/docs/content/docs/progress/pending-test.mdx
+++ b/docs/content/docs/progress/pending-test.mdx
@@ -14,6 +14,12 @@ description: 影策已实现功能的手工验证清单与未确认边界
 - [ ] 在存在图片、视频和文本长任务时发送 SIGTERM，确认 readiness 立即返回 503、新任务被拒绝、已领取任务在宽限期内完成，超时后租约可由重启实例恢复。
 - [ ] 构建带版本参数的前后端镜像，确认 `/api/system/version`、管理后台版本、OCI Commit 和 Release Tag 一致。
 
+## 画布视频静态首帧
+
+- [x] 普通上传与生成视频会在入库时串行截取并持久化 400px JPEG 首帧；历史视频仅在可见、未选中且浏览器空闲时单并发补图，选中媒体或离开视口会取消后台解码。
+- [x] 未选中视频只挂载静态图片，单选后才创建真实播放器；专项测试、TypeScript 检查、生产构建通过，本地画布刷新后 3 个历史视频首帧仍可显示。
+- [ ] 用户在包含本地上传、模型生成和外部无 CORS 视频的真实画布中确认首帧画面、刷新持久化与降级图标；连续平移、缩放和切换视频时确认最多只有一个播放器且没有明显闪烁。
+
 ## 自由空白画布与画布外观
 
 - [x] 新建画布引导新增“自由空白画布”主入口；进入后显示中央空白起始框和加号，不创建占位节点。
diff --git a/web/package.json b/web/package.json
index ce09e839a..0eb42fff0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,6 +9,7 @@
         "build": "bun run build:bridge && tsc --noEmit && vite build",
         "pretest": "bun test test/admin-ui-regressions.test.ts",
         "typecheck": "tsc --noEmit",
+        "test:canvas": "bun test test/canvas-media-performance.test.ts test/canvas-node-title-interaction.test.ts",
         "test": "bun test test/api-request.test.ts test/video-api-contracts.test.ts test/image-api-contracts.test.ts test/channel-model-catalog.test.ts test/model-protocols.test.ts test/model-capabilities.test.ts test/agent-prompt-cache.test.ts test/canvas-agent-context.test.ts test/canvas-batch-connection.test.ts test/canvas-character-reference.test.ts test/canvas-document.test.ts test/canvas-drawing-engine.test.ts test/canvas-emotion-edit-plan.test.ts test/canvas-extension-nodes.test.ts test/canvas-folder.test.ts test/canvas-generation-layout.test.ts test/canvas-generation-submission.test.ts test/canvas-image-batch-retry.test.ts test/canvas-keyboard.test.ts test/canvas-node-generation-mentions.test.ts test/canvas-node-search.test.ts test/canvas-leafer-viewport.test.ts test/canvas-media-download.test.ts test/canvas-local-runtime.test.ts test/canvas-model-policy.test.ts test/canvas-resource-mention-editor.test.ts test/canvas-resource-references.test.ts test/canvas-storyboard-assets.test.ts test/canvas-storyboard-references.test.ts test/canvas-node-config-reset.test.ts test/canvas-node-registry.test.ts test/canvas-video-frame.test.ts test/canvas-video-regeneration.test.ts test/canvas-video-timeline-segments.test.ts test/create-canvas-handoff.test.ts test/create-library-button.test.ts test/creation-references.test.ts test/director-transform-semantics.test.ts test/director-bone-precedence.test.ts test/director-gesture-transaction.test.ts test/director-transaction-lifecycle.test.ts test/director-session-authority.test.ts test/director-placement.test.ts test/director-resources.test.ts test/director-recovery.test.ts test/director-node-preview.test.ts test/generation-asset-repository.node.test.ts test/generation-storage-consistency.test.ts test/generation-task-durability.node.test.ts test/generation-task-local.test.ts test/generation-task-materializer.test.ts test/task-media-fallback.test.ts test/user-scoped-generation-persistence.test.ts test/local-channel-permission.test.ts test/local-channel-runtime-projection.node.test.mjs test/local-channel-task-center.node.test.mjs test/local-channel-ui.node.test.mjs test/local-cli-settings.test.ts test/local-dreamina-cli.test.ts test/local-dreamina-generation.test.ts test/local-dreamina-model-catalog.test.ts test/local-runtime-bootstrap.test.ts test/local-runtime-connection.test.ts test/local-runtime.test.ts test/client-id.test.ts test/grok-image-prompt-limit.test.ts test/image-resolution-tiers.test.ts test/gemini-image.test.ts test/libtv-import.test.ts test/timeline-to-ffmpeg.test.ts test/canvas-video-segment-args.test.ts test/tapnow-import.test.ts test/prompt-optimizer-drawer.test.ts test/director-save-coordinator.test.ts test/director-save-wiring.test.ts test/director-diagnostics.test.ts test/director-repro-runtime.test.ts test/director-diagnostics-recorder.test.ts test/director-keyframe-editing.test.ts test/director-shortcuts.test.ts test/director-keyframe-delete-wiring.test.ts test/director-templates.test.ts test/director-modes.test.ts test/director-template-mode-wiring.test.ts test/director-view-modes.test.ts && bun test test/local-dreamina-cross-runtime.test.ts",
         "test:director:e2e": "bun scripts/director-p0-chrome-e2e.mjs",
         "start": "vite preview --host 0.0.0.0 --port 3000",
diff --git a/web/src/components/canvas/asset-picker-modal.tsx b/web/src/components/canvas/asset-picker-modal.tsx
index 801dc150c..9a7f90ec2 100644
--- a/web/src/components/canvas/asset-picker-modal.tsx
+++ b/web/src/components/canvas/asset-picker-modal.tsx
@@ -10,7 +10,7 @@ type InsertableAsset = Extract<Asset, { kind: "text" | "image" | "video" | "audi
 export type InsertAssetPayload =
     | { kind: "text"; content: string; title: string; assetId?: string }
     | { kind: "image"; dataUrl: string; title: string; url?: string; storageKey?: string; width?: number; height?: number; bytes?: number; mimeType?: string; assetId?: string }
-    | { kind: "video"; url: string; title: string; storageKey?: string; width?: number; height?: number; durationMs?: number; bytes?: number; mimeType?: string; assetId?: string }
+    | { kind: "video"; url: string; title: string; storageKey?: string; width?: number; height?: number; durationMs?: number; hasAudio?: boolean; bytes?: number; mimeType?: string; assetId?: string }
     | { kind: "audio"; url: string; title: string; storageKey?: string; durationMs?: number; bytes?: number; mimeType?: string; assetId?: string }
     | { kind: "character"; title: string; assetId: string; versionId: string; prompt: string; aliases: string[]; definition: Record<string, unknown>; coverUrl?: string; visualStatus: string; voiceStatus: string; voiceName?: string; voiceProfile?: { name: string; provider: string; language: string; timbre: string }; voiceInstructions?: string };
 
@@ -75,7 +75,7 @@ export function assetPickerItemsToInsertPayloads(ids: string[], items: AssetLibr
 function localAssetToInsertPayload(asset: InsertableAsset): InsertAssetPayload {
     if (asset.kind === "text") return { kind: "text", content: asset.data.content, title: asset.title, assetId: asset.id };
     if (asset.kind === "audio") return { kind: "audio", url: asset.data.url, storageKey: asset.data.storageKey, title: asset.title, durationMs: asset.data.durationMs, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
-    if (asset.kind === "video") return { kind: "video", url: asset.data.url, storageKey: asset.data.storageKey, title: asset.title, width: asset.data.width, height: asset.data.height, durationMs: asset.data.durationMs, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
+    if (asset.kind === "video") return { kind: "video", url: asset.data.url, storageKey: asset.data.storageKey, title: asset.title, width: asset.data.width, height: asset.data.height, durationMs: asset.data.durationMs, hasAudio: asset.data.hasAudio, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
     return { kind: "image", dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, title: asset.title, width: asset.data.width, height: asset.data.height, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
 }
 
diff --git a/web/src/components/canvas/canvas-audio-player.tsx b/web/src/components/canvas/canvas-audio-player.tsx
new file mode 100644
index 000000000..43efa0e84
--- /dev/null
+++ b/web/src/components/canvas/canvas-audio-player.tsx
@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { AlertCircle, LoaderCircle, Pause, Play } from "lucide-react";
+
+import type { CanvasTheme } from "@/lib/canvas-theme";
+import { useCanvasNodeActions } from "./canvas-node-action-context";
+import { getCanvasAudioPlaybackSnapshot, seekCanvasAudio, stopCanvasAudio, subscribeCanvasAudioNode, toggleCanvasAudio } from "@/services/canvas-audio-playback";
+import type { CanvasNodeData } from "@/types/canvas";
+
+type CanvasAudioPlayerProps = {
+    node: CanvasNodeData;
+    theme: CanvasTheme;
+};
+
+export function CanvasAudioPlayer({ node, theme }: CanvasAudioPlayerProps) {
+    const { updateMetadata } = useCanvasNodeActions();
+    const subscribe = useCallback((listener: () => void) => subscribeCanvasAudioNode(node.id, listener), [node.id]);
+    const getSnapshot = useCallback(() => getCanvasAudioPlaybackSnapshot(node.id), [node.id]);
+    const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    const source = useMemo(
+        () => ({
+            nodeId: node.id,
+            content: node.metadata?.content || "",
+            storageKey: node.metadata?.storageKey,
+            mimeType: node.metadata?.mimeType,
+            durationMs: node.metadata?.durationMs,
+        }),
+        [node.id, node.metadata?.content, node.metadata?.durationMs, node.metadata?.mimeType, node.metadata?.storageKey],
+    );
+    const waveform = useMemo(() => createStableWaveform(node.id), [node.id]);
+    const syncedDurationRef = useRef(0);
+    const durationMs = snapshot.durationMs || node.metadata?.durationMs || 0;
+    const progress = durationMs > 0 ? Math.min(1, Math.max(0, snapshot.currentTimeMs / durationMs)) : 0;
+
+    useEffect(() => {
+        if (!snapshot.durationMs || snapshot.durationMs === node.metadata?.durationMs || syncedDurationRef.current === snapshot.durationMs) return;
+        syncedDurationRef.current = snapshot.durationMs;
+        updateMetadata?.(node.id, { durationMs: snapshot.durationMs });
+    }, [node.id, node.metadata?.durationMs, snapshot.durationMs, updateMetadata]);
+
+    useEffect(() => () => stopCanvasAudio(node.id), [node.id]);
+
+    const stopCanvasEvent = (event: React.SyntheticEvent) => event.stopPropagation();
+    const togglePlayback = () => {
+        void toggleCanvasAudio(source);
+    };
+    const seek = (event: React.ChangeEvent<HTMLInputElement>) => {
+        seekCanvasAudio(node.id, Number(event.target.value), source);
+    };
+    const label = node.title || "音频";
+    const isPlaying = snapshot.phase === "playing";
+    const isLoading = snapshot.phase === "loading";
+    const isError = snapshot.phase === "error";
+
+    return (
+        <div role="group" aria-label={`${label}播放控件`} className="flex h-full w-full min-w-0 flex-col justify-center gap-2.5 px-4" style={{ color: theme.node.text }}>
+            <div className="flex min-w-0 items-center gap-3">
+                <button
+                    type="button"
+                    aria-label={isPlaying ? `暂停${label}` : `播放${label}`}
+                    className="grid size-10 shrink-0 place-items-center rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-45"
+                    style={{ borderColor: `${theme.node.activeStroke}80`, background: `${theme.node.activeStroke}18`, color: theme.node.activeStroke }}
+                    disabled={isLoading || (!source.content && !source.storageKey)}
+                    onPointerDown={stopCanvasEvent}
+                    onMouseDown={stopCanvasEvent}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        togglePlayback();
+                    }}
+                >
+                    {isLoading ? <LoaderCircle className="size-4 animate-spin" aria-hidden="true" /> : isPlaying ? <Pause className="size-4" aria-hidden="true" /> : <Play className="ml-0.5 size-4" aria-hidden="true" />}
+                </button>
+                <div className="relative min-w-0 flex-1">
+                    <div className="relative mb-1 flex items-center gap-2 text-[var(--fs-label)] tabular-nums" style={{ color: theme.node.muted }}>
+                        <span>{formatAudioTime(snapshot.currentTimeMs)}/{durationMs ? formatAudioTime(durationMs) : "--:--"}</span>
+                    </div>
+                    <input
+                        type="range"
+                        min={0}
+                        max={Math.max(1, durationMs)}
+                        step={1}
+                        value={Math.min(Math.max(0, snapshot.currentTimeMs), Math.max(1, durationMs))}
+                        aria-label={`${label}播放进度`}
+                        className="h-3 w-full cursor-pointer accent-[var(--canvas-accent)]"
+                        style={{ accentColor: theme.node.activeStroke }}
+                        disabled={!durationMs || isError}
+                        onPointerDown={stopCanvasEvent}
+                        onMouseDown={stopCanvasEvent}
+                        onClick={stopCanvasEvent}
+                        onWheel={stopCanvasEvent}
+                        onChange={seek}
+                    />
+                </div>
+            </div>
+
+            <div className="flex h-8 min-w-0 items-center gap-1 overflow-hidden" aria-hidden="true">
+                {waveform.map((height, index) => (
+                    <span
+                        key={`${node.id}-${index}`}
+                        className="min-w-0 flex-1 rounded-full transition-opacity duration-150"
+                        style={{ height: `${Math.max(18, Math.round(height * 100))}%`, background: theme.node.activeStroke, opacity: index / waveform.length <= progress ? 0.9 : 0.22 }}
+                    />
+                ))}
+            </div>
+
+            {isError ? (
+                <div role="status" className="flex min-w-0 items-center gap-1.5 truncate text-[var(--fs-tiny)]" style={{ color: theme.accent.danger || theme.node.muted }}>
+                    <AlertCircle className="size-3.5 shrink-0" aria-hidden="true" />
+                    <span className="truncate">{snapshot.error || "音频播放失败"}</span>
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+function createStableWaveform(nodeId: string) {
+    let seed = 2166136261;
+    for (let index = 0; index < nodeId.length; index += 1) {
+        seed ^= nodeId.charCodeAt(index);
+        seed = Math.imul(seed, 16777619);
+    }
+    return Array.from({ length: 36 }, (_, index) => {
+        seed = Math.imul(seed ^ index, 16777619);
+        const normalized = ((seed >>> 0) % 100) / 100;
+        return 0.28 + normalized * 0.62;
+    });
+}
+
+function formatAudioTime(timeMs: number) {
+    const totalSeconds = Math.max(0, Math.floor(timeMs / 1000));
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
diff --git a/web/src/components/canvas/canvas-config-composer.tsx b/web/src/components/canvas/canvas-config-composer.tsx
index c2126b9fa..fda57e78f 100644
--- a/web/src/components/canvas/canvas-config-composer.tsx
+++ b/web/src/components/canvas/canvas-config-composer.tsx
@@ -331,7 +331,7 @@ function ResourcePreview({ candidate }: { candidate: ComposerCandidate }) {
         );
     }
     if (input.type === "image" && input.image) return <img src={input.image.dataUrl} alt="" className="size-9 rounded-md object-cover" />;
-    if (input.type === "video" && input.video) return <video src={input.video.url} className="size-9 rounded-md bg-black object-cover" muted preload="metadata" />;
+    if (input.type === "video" && input.previewUrl) return <img src={input.previewUrl} alt="" className="size-9 rounded-md bg-black object-cover" loading="lazy" decoding="async" />;
     const Icon = input.type === "audio" ? Music2 : input.type === "video" ? Video : input.type === "image" ? ImageIcon : FileText;
     return (
         <span className="grid size-9 shrink-0 place-items-center rounded-md bg-black/10">
@@ -352,9 +352,10 @@ function createReferenceChip(input: NodeGenerationInput, inputs: NodeGenerationI
     wrapper.dataset.referenceToken = `@${generationInputMentionLabel(input, inputs)}`;
     wrapper.className = "mx-px inline-flex h-7 max-w-40 items-center justify-center overflow-hidden rounded-md border px-1 text-xs leading-none align-middle";
     Object.assign(wrapper.style, chipStyle(theme));
-    if (input.type === "image" && input.image && input.sourceKind !== "drawing") {
+    const previewUrl = input.type === "image" && input.image && input.sourceKind !== "drawing" ? input.image.dataUrl : input.type === "video" ? input.previewUrl : "";
+    if (previewUrl) {
         const image = document.createElement("img");
-        image.src = input.image.dataUrl;
+        image.src = previewUrl;
         image.alt = input.title;
         image.className = "size-6 rounded object-cover";
         wrapper.className = "mx-px inline-flex size-6 items-center justify-center overflow-hidden rounded align-middle";
@@ -362,7 +363,7 @@ function createReferenceChip(input: NodeGenerationInput, inputs: NodeGenerationI
         wrapper.addEventListener("click", (event) => {
             event.preventDefault();
             event.stopPropagation();
-            onImagePreview(input.image?.dataUrl || "");
+            onImagePreview(previewUrl);
         });
     } else {
         wrapper.title = input.sourceKind === "drawing" ? resourceLabel(input, inputs) : input.text || input.title;
diff --git a/web/src/components/canvas/canvas-connections.tsx b/web/src/components/canvas/canvas-connections.tsx
index b1c61c805..6f6c86035 100644
--- a/web/src/components/canvas/canvas-connections.tsx
+++ b/web/src/components/canvas/canvas-connections.tsx
@@ -167,8 +167,8 @@ export function activeConnectionPath(node: CanvasNodeData | undefined, handle: C
  *
  * 单端口的一侧（左右各一个出入口，除分镜脚本外都是）**永远取边的正中**：
  * 之前按鼠标落点比例取 Y，多条线接同一个端口就会沿着边散开，视觉上像节点有很多端口。
- * 真正的多端口只存在于分镜脚本的 `row:` 句柄，走下面的分支——所以这里不再接受
- * anchorRatio 参数，避免「传了却被忽略」。
+ * 真正的多端口只存在于分镜脚本的 `row:` 句柄；普通节点始终连接到边缘
+ * 垂直中心，避免同一个节点因鼠标落点产生漂移的“伪端口”。
  */
 export function connectionHandleY(node: CanvasNodeData, handleId?: string, scrollTop = 0) {
     if (handleId === "storyboard:context") return node.position.y + node.height - (node.metadata?.storyboardComposerHeight || 104) / 2;
diff --git a/web/src/components/canvas/canvas-folder-preview.tsx b/web/src/components/canvas/canvas-folder-preview.tsx
index ac411ef4b..354dc4298 100644
--- a/web/src/components/canvas/canvas-folder-preview.tsx
+++ b/web/src/components/canvas/canvas-folder-preview.tsx
@@ -3,6 +3,7 @@ import { Dropdown } from "antd";
 import { FileAudio, FileText, MoreHorizontal, Pencil, Plus, SlidersHorizontal, Sparkles, Video } from "lucide-react";
 
 import { CANVAS_FOLDER_THEME_OPTIONS, resolveCanvasFolderTheme, resolveCanvasFolderThemeCover } from "@/lib/canvas/canvas-folder-theme";
+import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import type { CanvasFolderStyle, CanvasFolderTheme, CanvasNodeData } from "@/types/canvas";
 import { CanvasNodeType } from "@/types/canvas";
 
@@ -189,8 +190,9 @@ function FolderNodeMedia({ node }: { node?: CanvasNodeData }) {
     if (node?.type === CanvasNodeType.Image && node.metadata?.content) {
         return <img src={node.metadata.content} alt="" loading="lazy" decoding="async" draggable={false} />;
     }
-    if (node?.type === CanvasNodeType.Video && node.metadata?.content) {
-        return <video src={node.metadata.content} muted playsInline preload="metadata" />;
+    const videoPreview = node ? canvasNodeVideoPreviewUrl(node) : "";
+    if (videoPreview) {
+        return <img src={videoPreview} alt="" loading="lazy" decoding="async" draggable={false} />;
     }
     if (node?.type === CanvasNodeType.Drawing && (node.metadata?.drawingPreviewUrl || node.metadata?.content)) {
         return <img src={node.metadata.drawingPreviewUrl || node.metadata.content} alt="" loading="lazy" decoding="async" draggable={false} />;
diff --git a/web/src/components/canvas/canvas-frame-node.tsx b/web/src/components/canvas/canvas-frame-node.tsx
index 378748647..d0d156ff6 100644
--- a/web/src/components/canvas/canvas-frame-node.tsx
+++ b/web/src/components/canvas/canvas-frame-node.tsx
@@ -5,6 +5,7 @@ import { ChevronDown, ChevronRight, Video } from "lucide-react";
 import { CometCard } from "@/components/ui/aceternity/comet-card";
 import { CanvasFolderPreview } from "@/components/canvas/canvas-folder-preview";
 import { FRAME_HEADER_HEIGHT, FRAME_PADDING, isCanvasFolderNode } from "@/lib/canvas/canvas-frame";
+import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import { canvasThemes, type CanvasTheme } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasNodeType, type CanvasFolderStyle, type CanvasFolderTheme, type CanvasNodeData, type Position } from "@/types/canvas";
@@ -293,15 +294,16 @@ function FramePreview({ nodes, frame, theme }: { nodes: CanvasNodeData[]; frame:
     return (
         <div className="pointer-events-none absolute inset-x-2 bottom-2 overflow-hidden rounded-md" style={{ top: FRAME_HEADER_HEIGHT, background: theme.frame.preview }}>
             {layout.length ? (
-                layout.map(({ node, ...style }) => (
-                    <div key={node.id} className="absolute overflow-hidden rounded-[var(--r-xs)] border" style={{ ...style, background: theme.node.fill, borderColor: theme.node.stroke }}>
+                layout.map(({ node, ...style }) => {
+                    const videoPreview = canvasNodeVideoPreviewUrl(node);
+                    return <div key={node.id} className="absolute overflow-hidden rounded-[var(--r-xs)] border" style={{ ...style, background: theme.node.fill, borderColor: theme.node.stroke }}>
                         {node.type === CanvasNodeType.Image && node.metadata?.content ? <img src={node.metadata.content} alt="" className="h-full w-full object-cover" loading="lazy" decoding="async" draggable={false} /> : null}
-                        {node.type === CanvasNodeType.Video && node.metadata?.content ? <video src={node.metadata.content} className="h-full w-full object-cover" muted playsInline preload="metadata" /> : null}
-                        {node.type === CanvasNodeType.Video && !node.metadata?.content ? <Video className="m-auto size-4 h-full opacity-40" /> : null}
+                        {videoPreview ? <img src={videoPreview} alt="" className="h-full w-full object-cover" loading="lazy" decoding="async" draggable={false} /> : null}
+                        {node.type === CanvasNodeType.Video && !videoPreview ? <Video className="m-auto size-4 h-full opacity-40" /> : null}
                         {node.type === CanvasNodeType.Text ? <div className="line-clamp-3 p-1 text-[var(--fs-nano)] leading-[9px]" style={{ color: theme.node.text }}>{node.metadata?.content || node.title}</div> : null}
                         {node.type === CanvasNodeType.Script ? <div className="p-1 text-[var(--fs-nano)] leading-[9px]" style={{ color: theme.node.text }}>分镜脚本 · {node.metadata?.storyboard?.rows.length || 0} 镜</div> : null}
-                    </div>
-                ))
+                    </div>;
+                })
             ) : (
                 <div className="grid h-full place-items-center text-[var(--fs-label)]" style={{ color: theme.node.faint }}>空背板</div>
             )}
diff --git a/web/src/components/canvas/canvas-node-content.tsx b/web/src/components/canvas/canvas-node-content.tsx
index 467595227..ce9e09955 100644
--- a/web/src/components/canvas/canvas-node-content.tsx
+++ b/web/src/components/canvas/canvas-node-content.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode, type RefObject } from "react";
-import { AlertCircle, BookOpenCheck, Clock3, Download, FileText, Image as ImageIcon, LoaderCircle, Music2, Pencil, Play, RefreshCw, Video } from "lucide-react";
+import { AlertCircle, BookOpenCheck, Clock3, Download, FileText, Image as ImageIcon, LoaderCircle, Music2, Pencil, RefreshCw, Video } from "lucide-react";
 
 import { VideoPlayer } from "@/components/video-player";
 import { CONTENT_MODERATION_ERROR_CODE, generationErrorMessage, isContentModerationError } from "@/lib/generation-error";
@@ -7,18 +7,21 @@ import { generationTaskShowsProgress, generationTaskStageLabel, generationTaskSt
 import { canvasRichTextHTML } from "@/lib/canvas/canvas-rich-text";
 import { fitNodeSize } from "@/lib/canvas/canvas-node-size";
 import { loadCanvasDrawingPreview } from "@/lib/canvas/canvas-drawing-storage";
-import { buildLibTVImagePreviewUrl } from "@/lib/canvas/libtv-import";
+import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
+import { buildLibTVImagePreviewUrl, buildLibTVVideoSourceUrl } from "@/lib/canvas/libtv-import";
 import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
 import type { CanvasTheme } from "@/lib/canvas-theme";
 import { formatBytes } from "@/lib/image-utils";
 import { resourceIdFromStorageKey } from "@/services/api/resources";
 import type { GenerationTask } from "@/services/api/task-center";
 import { cacheResourceObjectUrl, getCachedResourceObjectUrl } from "@/services/resource-blob-cache";
+import { hydrateCanvasVideoPreview } from "@/services/canvas-video-preview";
 import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 import { getNodeDefinition } from "@/lib/canvas/node-registry";
 import { PORTRAIT_CLEARANCE_NODE_TYPE } from "@/lib/portrait-clearance/contracts";
 import { createDefaultSubtitleStyle } from "@/types/timeline";
 import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
+import { CanvasAudioPlayer } from "./canvas-audio-player";
 import { useCanvasNodeActions } from "./canvas-node-action-context";
 import { CanvasSubtitleOverlay } from "./canvas-subtitle-overlay";
 import { MarkdownNodeContent } from "./nodes/markdown-node";
@@ -50,6 +53,8 @@ export type CanvasNodeContentProps = {
     onOpenTaskDetails?: (node: CanvasNodeData) => void;
     onToggleBatch?: () => void;
     reduceMediaEffects?: boolean;
+    mediaActive?: boolean;
+    hydrateMediaPreview?: boolean;
 };
 
 export function CanvasNodeContent(props: CanvasNodeContentProps) {
@@ -412,11 +417,10 @@ function EmptyImageContent({ node, theme, isBatchRoot, batchCount, batchExpanded
     return content;
 }
 
-function VideoNodeContent({ node, theme, reduceMediaEffects }: CanvasNodeContentProps) {
-    const playWhenReadyRef = useRef(false);
+function VideoNodeContent({ node, theme, reduceMediaEffects, mediaActive = false, hydrateMediaPreview = false }: CanvasNodeContentProps) {
     const playerBoxRef = useRef<HTMLDivElement>(null);
     const { updateMetadata } = useCanvasNodeActions();
-    const { url, loading, load } = useNodeResourceUrl(node, false);
+    const { url, loading } = useNodeResourceUrl(node, mediaActive);
     const subtitleEntries = node.metadata?.subtitleEntries || [];
     const subtitleStyle = node.metadata?.subtitleStyle || createDefaultSubtitleStyle();
     const [currentTimeMs, setCurrentTimeMs] = useState(0);
@@ -445,7 +449,8 @@ function VideoNodeContent({ node, theme, reduceMediaEffects }: CanvasNodeContent
     }, [node.id, node.metadata?.naturalHeight, node.metadata?.naturalWidth, subtitleEntries.length, updateMetadata, url]);
 
     if (!node.metadata?.content) return <EmptyMediaContent icon={<Video className="size-7 opacity-35" />} label="空视频节点" color={theme.node.placeholder} />;
-    if (!url) return <DeferredMediaLoad icon={loading ? <LoaderCircle className="size-5 animate-spin" /> : <Play className="size-5 fill-current" />} label={loading ? "正在缓存视频" : "加载并缓存视频"} disabled={loading} onClick={() => { playWhenReadyRef.current = true; void load(); }} />;
+    if (!mediaActive) return <InactiveVideoPreview node={node} theme={theme} hydrateMediaPreview={hydrateMediaPreview} />;
+    if (!url) return <MediaLoadingState icon={<LoaderCircle className="size-5 animate-spin" />} label={loading ? "正在加载视频" : "视频资源不可用"} />;
 
     const sourceRatio = (videoSize?.width || node.metadata?.naturalWidth || node.width) / Math.max(1, videoSize?.height || node.metadata?.naturalHeight || node.height);
     const fitHeight = Math.min(node.height, node.width / Math.max(0.01, sourceRatio));
@@ -456,30 +461,69 @@ function VideoNodeContent({ node, theme, reduceMediaEffects }: CanvasNodeContent
     return (
         <div ref={playerBoxRef} className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-[var(--node-radius)] bg-black">
             <div className="relative" style={{ width: fitWidth, height: Math.round(fitHeight) }}>
-                <VideoPlayer src={url} mimeType={node.metadata?.mimeType} title={node.title || "视频"} preload={reduceMediaEffects ? "none" : "metadata"} autoPlay={playWhenReadyRef.current} onCanPlay={() => { playWhenReadyRef.current = false; }} brandColor={theme.accent.primary} className="h-full w-full rounded-[var(--node-radius)] bg-black" dataCanvasNoZoom compactControls />
+                <VideoPlayer src={url} mimeType={node.metadata?.mimeType} title={node.title || "视频"} hasAudio={inferVideoHasAudio(node.metadata)} autoPlay={mediaActive} preload={reduceMediaEffects ? "none" : "metadata"} brandColor={theme.accent.primary} className="h-full w-full rounded-[var(--node-radius)] bg-black" dataCanvasNoZoom compactControls />
                 {activeEntry && activeEntry.text.trim() ? <CanvasSubtitleOverlay text={activeEntry.text} highlight={activeHighlight} style={subtitleStyle} /> : null}
             </div>
         </div>
     );
 }
 
+function inferVideoHasAudio(metadata: CanvasNodeData["metadata"]): boolean | undefined {
+    if (typeof metadata?.hasAudio === "boolean") return metadata.hasAudio;
+    // Generated nodes from older saves may not have `hasAudio` yet. In that
+    // case an explicit generation setting is the only persisted signal we
+    // have; leave all other videos in the unknown state.
+    const value = metadata?.generateAudio?.trim().toLowerCase();
+    if (["false", "0", "off", "no", "disabled"].includes(value || "")) return false;
+    if (["true", "1", "on", "yes", "enabled"].includes(value || "")) return true;
+    return undefined;
+}
+
 function AudioNodeContent({ node, theme }: CanvasNodeContentProps) {
-    const audioRef = useRef<HTMLAudioElement>(null);
-    const playWhenReadyRef = useRef(false);
-    const { url, loading, load } = useNodeResourceUrl(node, false);
+    if (!node.metadata?.content && !node.metadata?.storageKey) return <EmptyMediaContent icon={<Music2 className="size-7 opacity-35" />} label="空音频节点" color={theme.node.placeholder} />;
+    return <CanvasAudioPlayer node={node} theme={theme} />;
+}
+
+function InactiveVideoPreview({ node, theme, hydrateMediaPreview = false }: Pick<CanvasNodeContentProps, "node" | "theme" | "hydrateMediaPreview">) {
+    const previewUrl = canvasNodeVideoPreviewUrl(node);
+    const { updateMetadata } = useCanvasNodeActions();
+    const updateMetadataRef = useRef(updateMetadata);
+    const [hydrating, setHydrating] = useState(false);
+
     useEffect(() => {
-        if (!url || !playWhenReadyRef.current) return;
-        playWhenReadyRef.current = false;
-        void audioRef.current?.play().catch(() => undefined);
-    }, [url]);
-    if (!node.metadata?.content) return <EmptyMediaContent icon={<Music2 className="size-7 opacity-35" />} label="空音频节点" color={theme.node.placeholder} />;
-    if (!url) return <DeferredMediaLoad icon={loading ? <LoaderCircle className="size-5 animate-spin" /> : <Play className="size-5 fill-current" />} label={loading ? "正在缓存音频" : "加载并缓存音频"} disabled={loading} onClick={() => { playWhenReadyRef.current = true; void load(); }} />;
-    return (
-        <div className="flex h-full w-full flex-col justify-center gap-3 px-4" style={{ background: theme.node.fill, color: theme.node.text }}>
-            <div className="flex min-w-0 items-center gap-2 text-sm opacity-70"><Music2 className="size-4 shrink-0" /><span className="min-w-0 truncate" title={node.title || "音频"}>{node.title || "音频"}</span></div>
-            <audio ref={audioRef} src={url} controls preload="metadata" className="w-full" data-canvas-no-zoom />
-        </div>
-    );
+        updateMetadataRef.current = updateMetadata;
+    }, [updateMetadata]);
+
+    useEffect(() => {
+        if (previewUrl || !hydrateMediaPreview || !node.metadata?.content || !updateMetadataRef.current) {
+            setHydrating(false);
+            return;
+        }
+        const controller = new AbortController();
+        setHydrating(true);
+        void hydrateCanvasVideoPreview(node, controller.signal)
+            .then((videoPreview) => {
+                if (!controller.signal.aborted && videoPreview) updateMetadataRef.current?.(node.id, { videoPreview });
+            })
+            .catch(() => undefined)
+            .finally(() => {
+                if (!controller.signal.aborted) setHydrating(false);
+            });
+        return () => controller.abort();
+    }, [hydrateMediaPreview, node.id, node.metadata?.content, node.metadata?.storageKey, previewUrl]);
+
+    if (previewUrl) {
+        return <div className="relative size-full overflow-hidden rounded-[var(--node-radius)] bg-black"><img src={previewUrl} alt={`${node.title || "视频"} 静态预览`} loading="lazy" decoding="async" draggable={false} className="pointer-events-none size-full select-none object-contain" /></div>;
+    }
+    return <InactiveMediaCard icon={<Video className="size-7" />} title={node.title || "视频"} hint={hydrating ? "正在生成首帧" : "选择后加载视频"} theme={theme} />;
+}
+
+function InactiveMediaCard({ icon, title, hint, theme }: { icon: ReactNode; title: string; hint: string; theme: CanvasTheme }) {
+    return <div className="flex size-full flex-col items-center justify-center gap-2 rounded-[var(--node-radius)] px-4 text-center" style={{ background: theme.node.fill, color: theme.node.muted }}><span className="opacity-40">{icon}</span><span className="max-w-full truncate text-xs font-medium" title={title}>{title}</span><span className="text-[var(--fs-tiny)] opacity-50">{hint}</span></div>;
+}
+
+function MediaLoadingState({ icon, label }: { icon: ReactNode; label: string }) {
+    return <div role="status" className="flex size-full flex-col items-center justify-center gap-2 rounded-[var(--node-radius)] bg-black text-white/75"><span className="grid size-10 place-items-center rounded-full bg-white/10">{icon}</span><span className="text-xs font-medium">{label}</span></div>;
 }
 
 function EmptyMediaContent({ icon, label, color }: { icon: ReactNode; label: string; color: string }) {
@@ -526,15 +570,19 @@ function ImageContent({ node, theme, isBatchRoot, batchCount, batchExpanded, bat
     );
 }
 
-function DeferredMediaLoad({ icon, label, disabled, onClick }: { icon: ReactNode; label: string; disabled: boolean; onClick: () => void }) {
-    return <button type="button" data-canvas-no-zoom className="flex size-full flex-col items-center justify-center gap-2 rounded-[var(--node-radius)] bg-black text-white/75 transition-colors hover:text-white disabled:cursor-wait" disabled={disabled} onClick={(event) => { event.stopPropagation(); onClick(); }} onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}><span className="grid size-10 place-items-center rounded-full bg-white/10">{icon}</span><span className="text-xs font-medium">{label}</span></button>;
-}
-
 function useNodeResourceUrl(node: CanvasNodeData, eager: boolean) {
     const storageKey = node.metadata?.storageKey || "";
-    const content = node.metadata?.content || "";
-    const fallback = node.metadata?.previewContent
-        || (node.type === CanvasNodeType.Image && node.metadata?.importSource?.provider === "libtv" ? buildLibTVImagePreviewUrl(content) : content);
+    const rawContent = node.metadata?.content || "";
+    const content = node.type === CanvasNodeType.Video && node.metadata?.importSource?.provider === "libtv"
+        ? buildLibTVVideoSourceUrl(rawContent)
+        : rawContent;
+    // `previewContent` is intentionally passive-only.  When a media node is
+    // activated, VideoPlayer/Audio must receive the playable asset, never the
+    // LibTV OSS snapshot URL stored for the thumbnail.
+    const fallback = node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio
+        ? content
+        : node.metadata?.previewContent
+            || (node.type === CanvasNodeType.Image && node.metadata?.importSource?.provider === "libtv" ? buildLibTVImagePreviewUrl(content) : content);
     const isRemoteResource = Boolean(resourceIdFromStorageKey(storageKey));
     const [url, setUrl] = useState(isRemoteResource ? "" : fallback);
     const [loading, setLoading] = useState(isRemoteResource && eager);
@@ -559,22 +607,7 @@ function useNodeResourceUrl(node: CanvasNodeData, eager: boolean) {
         return () => { cancelled = true; };
     }, [eager, fallback, isRemoteResource, storageKey]);
 
-    const load = useCallback(async () => {
-        if (url) return url;
-        if (!isRemoteResource) return fallback;
-        setLoading(true);
-        try {
-            const next = (await cacheResourceObjectUrl(storageKey)) || fallback;
-            setUrl(next);
-            return next;
-        } catch {
-            setUrl(fallback);
-            return fallback;
-        } finally {
-            setLoading(false);
-        }
-    }, [fallback, isRemoteResource, storageKey, url]);
-    return { url, loading, load };
+    return { url, loading };
 }
 
 function useNearViewport(ref: RefObject<Element | null>) {
diff --git a/web/src/components/canvas/canvas-node-generation.ts b/web/src/components/canvas/canvas-node-generation.ts
index 616ef58a0..0a74dbcbc 100644
--- a/web/src/components/canvas/canvas-node-generation.ts
+++ b/web/src/components/canvas/canvas-node-generation.ts
@@ -5,6 +5,7 @@ import type { ReferenceImage } from "@/types/image";
 import type { ReferenceAudio, ReferenceVideo } from "@/types/media";
 import { CanvasNodeType, type CanvasConnection, type CanvasGenerationMode, type CanvasNodeData } from "@/types/canvas";
 import { getGenerationResourceNodes, getContextResourceNodes, getMentionResourceNodes } from "@/lib/canvas/canvas-resource-references";
+import { canvasNodeVideoPreviewUrl, canvasVideoAssetPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import { isNeutralColorGrade, resolveCanvasColorGradeReference } from "@/lib/canvas/canvas-color-grade";
 import { getNodeResourceKind } from "@/lib/canvas/node-registry";
 import { resolveCanvasDrawingReference } from "@/lib/canvas/canvas-drawing-reference";
@@ -53,6 +54,7 @@ export type NodeGenerationInput = {
     type: "text" | "image" | "video" | "audio" | "character";
     sourceKind?: "drawing";
     title: string;
+    previewUrl?: string;
     alwaysIncludeText?: boolean;
     text?: string;
     image?: ReferenceImage;
@@ -339,7 +341,7 @@ function buildGenerationInputs(resourceNodes: CanvasNodeData[], nodes: CanvasNod
         // 调色节点在下游就是一张普通参考图，按 image 标签即正确。
         if (image) return [{ nodeId: node.id, type: "image" as const, sourceKind: image.source?.kind === "drawing" ? "drawing" : undefined, title: node.title, image }];
         const video = readReferenceVideo(node);
-        if (video) return [{ nodeId: node.id, type: "video" as const, title: node.title, video }];
+        if (video) return [{ nodeId: node.id, type: "video" as const, title: node.title, previewUrl: canvasNodeVideoPreviewUrl(node), video }];
         const audio = readReferenceAudio(node);
         if (audio) return [{ nodeId: node.id, type: "audio" as const, title: node.title, audio }];
         const text = readNodeTextInput(node);
@@ -364,7 +366,7 @@ function buildAssetGenerationInputs(assets: Asset[]): NodeGenerationInput[] {
         const nodeId = `asset:${asset.id}`;
         if (asset.kind === "text") return [{ nodeId, type: "text", title: asset.title, text: asset.data.content }];
         if (asset.kind === "image") return [{ nodeId, type: "image", title: asset.title, image: { id: asset.id, name: asset.title, type: asset.data.mimeType, dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, bytes: asset.data.bytes, width: asset.data.width, height: asset.data.height } }];
-        if (asset.kind === "video") return [{ nodeId, type: "video", title: asset.title, video: { id: asset.id, name: asset.title, type: asset.data.mimeType, url: asset.data.url, storageKey: asset.data.storageKey, bytes: asset.data.bytes, width: asset.data.width, height: asset.data.height, durationMs: asset.data.durationMs } }];
+        if (asset.kind === "video") return [{ nodeId, type: "video", title: asset.title, previewUrl: canvasVideoAssetPreviewUrl(asset.data.url, asset.coverUrl), video: { id: asset.id, name: asset.title, type: asset.data.mimeType, url: asset.data.url, storageKey: asset.data.storageKey, bytes: asset.data.bytes, width: asset.data.width, height: asset.data.height, durationMs: asset.data.durationMs } }];
         if (asset.kind === "audio") return [{ nodeId, type: "audio", title: asset.title, audio: { id: asset.id, name: asset.title, type: asset.data.mimeType, url: asset.data.url, storageKey: asset.data.storageKey, bytes: asset.data.bytes, durationMs: asset.data.durationMs } }];
         if (asset.kind === "entity" && asset.category === "character") return [{ nodeId, type: "character", title: asset.title, character: { nodeId, assetId: asset.id, requestedVersionId: asset.primaryVersionId } }];
         return [];
diff --git a/web/src/components/canvas/canvas-node-prompt-panel.tsx b/web/src/components/canvas/canvas-node-prompt-panel.tsx
index 1e095877b..ca00c3cdc 100644
--- a/web/src/components/canvas/canvas-node-prompt-panel.tsx
+++ b/web/src/components/canvas/canvas-node-prompt-panel.tsx
@@ -598,7 +598,7 @@ function ConnectedReferenceShelf({ references, theme, onInsert, onRemove }: { re
 
 function ReferenceThumbnail({ reference }: { reference: CanvasResourceReference }) {
     if (reference.kind === "image" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full object-cover" />;
-    if (reference.kind === "video" && reference.previewUrl) return <video src={reference.previewUrl} className="size-full bg-black object-cover" muted preload="metadata" />;
+    if (reference.kind === "video" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full bg-black object-cover" loading="lazy" decoding="async" />;
     if (reference.kind === "character" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-full bg-black/5 object-contain" />;
 
     const Icon = reference.sourceType === CanvasNodeType.Drawing ? Pencil : reference.kind === "character" ? UserRound : reference.kind === "audio" ? Music2 : reference.kind === "video" ? Video : reference.kind === "image" ? ImageIcon : FileText;
diff --git a/web/src/components/canvas/canvas-node-search-modal.tsx b/web/src/components/canvas/canvas-node-search-modal.tsx
index 28093fbbf..b9e791417 100644
--- a/web/src/components/canvas/canvas-node-search-modal.tsx
+++ b/web/src/components/canvas/canvas-node-search-modal.tsx
@@ -4,6 +4,7 @@ import { AudioLines, BookOpenText, Clock3, FileText, Image, Pencil, Search, Vide
 
 import { WorkspaceState } from "@/components/layout/workspace-state";
 import { canvasNodeMaterialSummary, canvasNodeSearchContext, canvasNodeSearchTimes, searchCanvasNodes } from "@/lib/canvas/canvas-node-search";
+import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import { getNodeListLabel } from "@/lib/canvas/node-registry";
 import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 
@@ -124,16 +125,13 @@ const CanvasNodeSearchResult = memo(function CanvasNodeSearchResult({ node, acti
 
 function CanvasNodeSearchThumbnail({ node }: { node: CanvasNodeData }) {
     const [failed, setFailed] = useState(false);
-    const mediaSource = node.metadata?.drawingPreviewUrl
+    const mediaSource = node.type === CanvasNodeType.Video ? canvasNodeVideoPreviewUrl(node) : node.metadata?.drawingPreviewUrl
         || node.metadata?.characterCoverUrl
         || node.metadata?.folder?.themeCover
-        || ((node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Panorama || node.type === CanvasNodeType.ColorGrade) ? node.metadata?.content : undefined);
+        || ((node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Panorama || node.type === CanvasNodeType.ColorGrade) ? node.metadata?.content : undefined);
     const commonClass = "h-11 w-16 rounded-[var(--r-sm)] border object-cover";
     const commonStyle = { borderColor: "color-mix(in srgb, var(--foreground) 9%, transparent)", background: "color-mix(in srgb, var(--foreground) 5%, transparent)" };
 
-    if (mediaSource && !failed && node.type === CanvasNodeType.Video) {
-        return <video src={mediaSource} muted playsInline preload="metadata" aria-label={`${node.title} 视频缩略图`} className={commonClass} style={commonStyle} onError={() => setFailed(true)} />;
-    }
     if (mediaSource && !failed) {
         return <img src={mediaSource} alt="" width={64} height={44} loading="lazy" decoding="async" className={commonClass} style={commonStyle} onError={() => setFailed(true)} />;
     }
diff --git a/web/src/components/canvas/canvas-node.tsx b/web/src/components/canvas/canvas-node.tsx
index 305425f7b..15622618f 100644
--- a/web/src/components/canvas/canvas-node.tsx
+++ b/web/src/components/canvas/canvas-node.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
-import { AlertCircle, BookOpenCheck, CheckCircle2, ChevronRight, Clapperboard, Copy, Download, Image as ImageIcon, Lock, Maximize2, Music2, Pencil, Plus, RefreshCw, Settings2, Star, Trash2, Type, Video } from "lucide-react";
+import { AlertCircle, BookOpenCheck, CheckCircle2, ChevronRight, Clapperboard, Copy, Download, Image as ImageIcon, Lock, Maximize2, Music2, Pencil, RefreshCw, Settings2, Star, Trash2, Type, Video } from "lucide-react";
 
 import { useCanvasNodeActions } from "./canvas-node-action-context";
 
@@ -23,6 +23,8 @@ type CanvasNodeProps = {
     dragOffset?: Position;
     scale: number;
     isSelected: boolean;
+    mediaActive?: boolean;
+    hydrateMediaPreview?: boolean;
     isRelated: boolean;
     isFocusRelated: boolean;
     isConnectionTarget: boolean;
@@ -67,6 +69,8 @@ export const CanvasNode = React.memo(function CanvasNode({
     dragOffset,
     scale,
     isSelected,
+    mediaActive = false,
+    hydrateMediaPreview = false,
     isRelated,
     isFocusRelated,
     isConnectionTarget,
@@ -112,7 +116,7 @@ export const CanvasNode = React.memo(function CanvasNode({
     const { download: downloadNode, duplicate: duplicateNode, deleteNode } = useCanvasNodeActions();
     const hasImageContent = data.type === CanvasNodeType.Image && Boolean(data.metadata?.content);
     const hasVideoContent = data.type === CanvasNodeType.Video && Boolean(data.metadata?.content);
-    const hasAudioContent = data.type === CanvasNodeType.Audio && Boolean(data.metadata?.content);
+    const hasAudioContent = data.type === CanvasNodeType.Audio && Boolean(data.metadata?.content || data.metadata?.storageKey);
     const mediaDimensionLabel = formatMediaDimensionLabel(data, hasImageContent || hasVideoContent);
     const isComposerNode = data.type === CanvasNodeType.Config;
     const hasMediaContent = hasImageContent || hasVideoContent || hasAudioContent;
@@ -261,7 +265,7 @@ export const CanvasNode = React.memo(function CanvasNode({
     return (
         <div
             data-node-id={data.id}
-            className={`node-element absolute flex select-none flex-col ${dragOffset ? "cursor-grabbing" : data.type === CanvasNodeType.Drawing ? "cursor-pointer" : "cursor-default"} ${isSelected ? "z-[var(--z-node-active)]" : "z-[var(--z-node)]"}`}
+            className={`node-element absolute flex select-none flex-col ${dragOffset ? "cursor-grabbing" : data.type === CanvasNodeType.Drawing ? "cursor-pointer" : "cursor-default"} ${isSelected && data.type === CanvasNodeType.Video ? "z-[var(--z-node-toolbar)]" : isSelected || isFocusRelated || isConnectionTarget ? "z-[var(--z-node-active)]" : "z-[var(--z-node)]"}`}
             style={{
                 transform: `translate(${data.position.x + (dragOffset?.x || 0)}px, ${data.position.y + (dragOffset?.y || 0)}px)`,
                 width: data.width,
@@ -282,7 +286,7 @@ export const CanvasNode = React.memo(function CanvasNode({
                 node={data}
                 scale={scale}
                 dimensionLabel={mediaDimensionLabel}
-                active={hovered || isSelected || isFocusRelated}
+                active={isSelected || isFocusRelated}
                 editable={!readOnly && !data.metadata?.locked && Boolean(onTitleChange)}
                 editing={isEditingTitle}
                 draft={titleDraft}
@@ -300,7 +304,7 @@ export const CanvasNode = React.memo(function CanvasNode({
                     background: hasImageContent || hasVideoContent ? "transparent" : theme.node.fill,
                     // 固定占位但不绘制描边，避免聚焦切换时边框宽度变化造成白边跳动。
                     border: isComposerNode ? "0" : "1px solid transparent",
-                    boxShadow: isComposerNode ? "none" : isSelected || hovered ? theme.node.hoverShadow : theme.node.shadow,
+                    boxShadow: isComposerNode ? "none" : isSelected || isFocusRelated ? theme.node.hoverShadow : theme.node.shadow,
                 }}
                 onMouseDown={(event) => onMouseDown(event, data.id)}
                 onDoubleClick={(event) => {
@@ -338,7 +342,7 @@ export const CanvasNode = React.memo(function CanvasNode({
                     className={`relative flex h-full w-full items-center justify-center rounded-[inherit] ${isBatchRoot || data.type === CanvasNodeType.Script ? "overflow-visible" : "overflow-hidden"}`}
                     style={
                         {
-                            background: hasImageContent || hasVideoContent ? "transparent" : theme.node.fill,
+                            background: hasImageContent || hasVideoContent || hasAudioContent ? "transparent" : theme.node.fill,
                             "--batch-from-x": `${batchMotion?.x || 0}px`,
                             "--batch-from-y": `${batchMotion?.y || 0}px`,
                             "--batch-from-rotate": `${6 + (batchMotion?.index || 0) * 4}deg`,
@@ -371,6 +375,8 @@ export const CanvasNode = React.memo(function CanvasNode({
                         onOpenTaskDetails={onOpenTaskDetails}
                         onToggleBatch={() => onToggleBatch?.(data.id)}
                         reduceMediaEffects={reduceMediaEffects}
+                        mediaActive={mediaActive}
+                        hydrateMediaPreview={hydrateMediaPreview}
                     />
                 </div>
 
@@ -460,8 +466,8 @@ export const CanvasNode = React.memo(function CanvasNode({
                 </> : null}
             </div>
 
-            {!readOnly && data.type !== CanvasNodeType.Script && (hovered || forceInputVisible) ? <ConnectionSideRail side="left" scale={scale} theme={theme} onPointerDown={(event, anchorRatio) => onConnectStart(event, data.id, "target", undefined, anchorRatio)} /> : null}
-            {!readOnly && data.type !== CanvasNodeType.Script && data.type !== CanvasNodeType.Config && showOutputConnection && hovered ? <ConnectionSideRail side="right" scale={scale} theme={theme} onPointerDown={(event, anchorRatio) => onConnectStart(event, data.id, "source", undefined, anchorRatio)} /> : null}
+            {!readOnly && data.type !== CanvasNodeType.Script ? <ConnectionSideRail side="left" scale={scale} theme={theme} visible={hovered || forceInputVisible} onPointerDown={(event, anchorRatio) => onConnectStart(event, data.id, "target", undefined, anchorRatio)} /> : null}
+            {!readOnly && data.type !== CanvasNodeType.Script && data.type !== CanvasNodeType.Config && showOutputConnection ? <ConnectionSideRail side="right" scale={scale} theme={theme} visible={hovered} onPointerDown={(event, anchorRatio) => onConnectStart(event, data.id, "source", undefined, anchorRatio)} /> : null}
 
         </div>
     );
@@ -474,6 +480,7 @@ function areCanvasNodePropsEqual(previous: CanvasNodeProps, next: CanvasNodeProp
         previous.dragOffset?.y === next.dragOffset?.y &&
         previous.scale === next.scale &&
         previous.isSelected === next.isSelected &&
+        previous.mediaActive === next.mediaActive &&
         previous.isRelated === next.isRelated &&
         previous.isFocusRelated === next.isFocusRelated &&
         previous.isConnectionTarget === next.isConnectionTarget &&
@@ -629,21 +636,21 @@ function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, edi
     const inverseScale = 1 / Math.max(scale, 0.05);
     const Icon = nodeTypeIcon(node.type);
     const maxHeaderWidth = Math.min(240, node.width * scale);
-    const externalHeaderWidth = node.width * scale;
 
     return (
         <div
             className="canvas-node-external-header absolute bottom-full left-0 z-[var(--node-z-overlay)] flex h-6 items-center gap-1 overflow-hidden"
             style={{
-                width: dimensionLabel ? externalHeaderWidth : undefined,
+                width: dimensionLabel ? "calc(var(--canvas-node-width) * var(--canvas-live-scale, 1))" : undefined,
                 maxWidth: dimensionLabel ? undefined : maxHeaderWidth,
+                "--canvas-node-width": `${node.width}px`,
                 borderRadius: "var(--r-sm)",
                 background: "transparent",
                 paddingInline: "var(--space-1-half)",
                 color: active ? theme.node.text : theme.node.label,
                 transform: `scale(var(--canvas-live-inverse-scale, ${inverseScale}))`,
                 transformOrigin: "left bottom",
-            }}
+            } as React.CSSProperties}
             onMouseDown={(event) => event.stopPropagation()}
             onPointerDown={(event) => event.stopPropagation()}
         >
@@ -729,53 +736,93 @@ function NodeStatusBadge({ status }: { status: "loading" | "success" | "error" }
     );
 }
 
-function ConnectionSideRail({ side, scale, theme, onPointerDown }: { side: "left" | "right"; scale: number; theme: CanvasTheme; onPointerDown: (event: React.PointerEvent, anchorRatio: number) => void }) {
+function ConnectionSideRail({ side, scale, theme, visible = false, onPointerDown }: { side: "left" | "right"; scale: number; theme: CanvasTheme; visible?: boolean; onPointerDown: (event: React.PointerEvent, anchorRatio: number) => void }) {
     const handleRef = useRef<HTMLSpanElement>(null);
-    const anchorRatioRef = useRef(0.5);
+    const [railHovered, setRailHovered] = useState(false);
     const inverseScale = 1 / Math.max(scale, 0.05);
+    const railSize = 80;
+    // Keep the control responsive to zoom, but avoid sub-pixel circles and
+    // strokes at far zoom levels where the plus sign appears visually off-center.
+    const handleSize = Math.max(20, 8 * inverseScale);
+    // LibTV centers the visual quick-add icon in an approximately 80px
+    // circular hit zone, then offsets it toward the node edge. Keep that
+    // visual layer separate from the real centered connection anchor.
+    const sideOffset = side === "left" ? 25 : -25;
 
-    const resetAnchor = useCallback(() => {
-        anchorRatioRef.current = 0.5;
-        if (handleRef.current) handleRef.current.style.top = "50%";
-    }, []);
+    const resetHandle = useCallback(() => {
+        if (!handleRef.current) return;
+        handleRef.current.style.transform = `translate(${sideOffset}px, 0) scale(1)`;
+    }, [sideOffset]);
 
-    const updateAnchor = (event: React.PointerEvent<HTMLButtonElement>) => {
-        const railBounds = event.currentTarget.getBoundingClientRect();
-        const nodeBounds = event.currentTarget.parentElement?.getBoundingClientRect() || railBounds;
-        const screenPadding = Math.min(railBounds.height * 0.35, 12);
-        const railRatio = Math.min(1 - screenPadding / Math.max(railBounds.height, 1), Math.max(screenPadding / Math.max(railBounds.height, 1), (event.clientY - railBounds.top) / Math.max(railBounds.height, 1)));
-        const anchorY = railBounds.top + railBounds.height * railRatio;
-        anchorRatioRef.current = Math.min(1, Math.max(0, (anchorY - nodeBounds.top) / Math.max(nodeBounds.height, 1)));
-        if (handleRef.current) handleRef.current.style.top = `${railRatio * 100}%`;
+    const updateHandle = (event: React.PointerEvent<HTMLButtonElement>) => {
+        const bounds = event.currentTarget.getBoundingClientRect();
+        const width = Math.max(bounds.width, 1);
+        const height = Math.max(bounds.height, 1);
+        const followLimit = 30;
+        const deltaX = event.clientX - (bounds.left + width / 2);
+        const deltaY = event.clientY - (bounds.top + height / 2);
+        const offsetScreenX = Math.max(-followLimit, Math.min(followLimit, deltaX));
+        const offsetScreenY = Math.max(-followLimit, Math.min(followLimit, deltaY));
+        const focus = 1 + Math.max(0, 1 - Math.hypot(offsetScreenX, offsetScreenY) / followLimit) * 0.1;
+        // While the pointer is inside the rail LibTV uses the rail center as
+        // the origin. The side-specific +/-25px offset is only the resting
+        // position used after leaving the rail.
+        const offsetX = offsetScreenX * inverseScale;
+        const offsetY = offsetScreenY * inverseScale;
+        if (handleRef.current) handleRef.current.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${focus})`;
     };
 
     return (
         <button
             type="button"
-            className="group pointer-events-auto absolute top-1/2 z-[var(--node-z-overlay)] touch-none -translate-y-1/2 opacity-100 outline-none transition-opacity duration-150"
-            style={{ width: 56 * inverseScale, height: `min(100%, ${72 * inverseScale}px)`, ...(side === "left" ? { right: "100%" } : { left: "100%" }) }}
-            onPointerEnter={updateAnchor}
-            onPointerMove={updateAnchor}
-            onPointerLeave={resetAnchor}
-            onPointerDown={(event) => onPointerDown(event, anchorRatioRef.current)}
+            data-canvas-connection-rail={side}
+            className={`group pointer-events-auto absolute top-1/2 z-[var(--node-z-overlay)] flex -translate-y-1/2 items-center justify-center touch-none cursor-crosshair rounded-full outline-none transition-opacity duration-150 ${visible || railHovered ? "opacity-100" : "opacity-0"}`}
+            style={{ width: railSize, height: `min(100%, ${railSize}px)`, cursor: "crosshair", ...(side === "left" ? { right: "100%" } : { left: "100%" }) }}
+            onPointerEnter={(event) => {
+                setRailHovered(true);
+                updateHandle(event);
+            }}
+            onPointerMove={updateHandle}
+            onPointerLeave={() => {
+                setRailHovered(false);
+                resetHandle();
+            }}
+            onPointerDown={(event) => onPointerDown(event, 0.5)}
             aria-label={`${side === "left" ? "输入" : "输出"}连接点，单击创建节点或拖动连线`}
         >
             <span
                 ref={handleRef}
-                className="absolute grid -translate-y-1/2 place-items-center rounded-full border transition-[background-color,box-shadow] duration-150 group-hover:brightness-125 group-focus-visible:brightness-125"
+                className="absolute left-1/2 top-1/2 block transition-transform duration-[80ms] ease-out group-hover:brightness-125 group-focus-visible:brightness-125"
                 style={{
-                    top: "50%",
-                    width: 18 * inverseScale,
-                    height: 18 * inverseScale,
-                    ...(side === "left" ? { right: 6 * inverseScale } : { left: 6 * inverseScale }),
-                    borderWidth: inverseScale,
-                    background: theme.spatial.elevated,
-                    borderColor: theme.node.activeStroke,
-                    color: theme.node.activeStroke,
-                    boxShadow: "none",
+                    width: handleSize,
+                    height: handleSize,
+                    marginLeft: -handleSize / 2,
+                    marginTop: -handleSize / 2,
+                    transform: `translate(${sideOffset}px, 0) scale(1)`,
+                    transition: "transform 80ms ease-out",
+                    transformOrigin: "center",
+                    willChange: "transform",
                 }}
             >
-                <Plus style={{ width: 10 * inverseScale, height: 10 * inverseScale }} strokeWidth={2} />
+                <svg
+                    aria-hidden="true"
+                    className="block"
+                    width={handleSize}
+                    height={handleSize}
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    style={{
+                        position: "absolute",
+                        left: "50%",
+                        top: "50%",
+                        marginLeft: -handleSize / 2,
+                        marginTop: -handleSize / 2,
+                    }}
+                >
+                    <circle cx="10" cy="10" r="9.35" fill={theme.spatial.elevated} />
+                    <circle cx="10" cy="10" r="9.35" stroke={theme.node.activeStroke} strokeWidth="1.2" />
+                    <path d="M10 6.5v7M6.5 10h7" stroke={theme.node.activeStroke} strokeWidth="1.5" strokeLinecap="round" />
+                </svg>
             </span>
         </button>
     );
diff --git a/web/src/components/canvas/canvas-resource-mention-textarea.tsx b/web/src/components/canvas/canvas-resource-mention-textarea.tsx
index 724b6685e..19af80961 100644
--- a/web/src/components/canvas/canvas-resource-mention-textarea.tsx
+++ b/web/src/components/canvas/canvas-resource-mention-textarea.tsx
@@ -481,14 +481,21 @@ function createInlineMentionChip(reference: CanvasResourceReference, token: stri
 
 function createInlinePreview(reference: CanvasResourceReference) {
     if ((reference.kind === "image" || reference.kind === "video" || reference.kind === "character") && reference.previewUrl) {
-        const media = document.createElement(reference.kind === "video" ? "video" : "img");
+        const media = document.createElement("img");
         media.className = `canvas-resource-inline-preview is-${reference.kind}`;
         media.setAttribute("src", reference.previewUrl);
         media.setAttribute("alt", "");
-        if (media instanceof HTMLVideoElement) {
-            media.muted = true;
-            media.preload = "metadata";
-        }
+        return media;
+    }
+    if (reference.kind === "video" && reference.mediaUrl) {
+        const media = document.createElement("video");
+        media.className = "canvas-resource-inline-preview is-video";
+        media.setAttribute("src", reference.mediaUrl);
+        media.setAttribute("aria-hidden", "true");
+        media.muted = true;
+        media.playsInline = true;
+        media.preload = "metadata";
+        media.onloadedmetadata = () => primeVideoPreviewFrame(media);
         return media;
     }
     const fallback = document.createElement("span");
@@ -685,7 +692,10 @@ function MentionReferenceList({ references, activeReferenceId, onSelect }: { ref
 
 function ReferencePreview({ reference }: { reference: CanvasResourceReference }) {
     if (reference.kind === "image" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="canvas-resource-mention-preview is-image" />;
-    if (reference.kind === "video" && reference.previewUrl) return <video src={reference.previewUrl} className="canvas-resource-mention-preview is-video" muted preload="metadata" />;
+    if (reference.kind === "video" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="canvas-resource-mention-preview is-video" loading="lazy" decoding="async" />;
+    if (reference.kind === "video" && reference.mediaUrl) {
+        return <video src={reference.mediaUrl} aria-hidden="true" muted playsInline preload="metadata" className="canvas-resource-mention-preview is-video" onLoadedMetadata={(event) => primeVideoPreviewFrame(event.currentTarget)} />;
+    }
     if (reference.kind === "character" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="canvas-resource-mention-preview is-character" />;
     if (reference.kind === "skill") {
         return (
@@ -702,6 +712,17 @@ function ReferencePreview({ reference }: { reference: CanvasResourceReference })
     );
 }
 
+function primeVideoPreviewFrame(video: HTMLVideoElement) {
+    if (video.currentTime !== 0 || !Number.isFinite(video.duration) || video.duration <= 0) return;
+    try {
+        // Metadata-only loading does not paint a frame consistently across browsers.
+        // Seeking a tiny amount keeps this preview passive while forcing first-frame decode.
+        video.currentTime = Math.min(0.001, video.duration);
+    } catch {
+        // A transient media error should leave the fallback element usable.
+    }
+}
+
 function splitMentionText(value: string, references: CanvasResourceReference[]) {
     if (!references.length || !value) return value ? [{ type: "text", text: value } as MentionTextPart] : [];
     const referenceByToken = new Map<string, { reference: CanvasResourceReference; serializedToken: string }>();
diff --git a/web/src/components/canvas/canvas-version-compare-modal.tsx b/web/src/components/canvas/canvas-version-compare-modal.tsx
index 548570328..173d55ffc 100644
--- a/web/src/components/canvas/canvas-version-compare-modal.tsx
+++ b/web/src/components/canvas/canvas-version-compare-modal.tsx
@@ -2,6 +2,7 @@ import { Button, Modal } from "antd";
 import { Check, Star } from "lucide-react";
 
 import { canvasThemes } from "@/lib/canvas-theme";
+import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 
@@ -11,14 +12,16 @@ export function CanvasVersionCompareModal({ open, versions, onClose, onSetPrimar
     return (
         <Modal title="版本对比" open={open} footer={null} width={modalWidth} centered onCancel={onClose} styles={{ body: { overflow: "hidden" } }}>
             <div className="thin-scrollbar grid max-h-[70vh] grid-flow-col auto-cols-[328px] gap-3 overflow-x-auto pb-2">
-                {versions.map((node) => (
+                {versions.map((node) => {
+                    const videoPreview = canvasNodeVideoPreviewUrl(node);
+                    return (
                     <article key={node.id} className="overflow-hidden rounded-[var(--r-lg)] border" style={{ borderColor: node.metadata?.versionPrimary ? theme.accent.primary : theme.node.stroke, background: theme.node.panel, boxShadow: node.metadata?.versionPrimary ? "0 0 0 2px " + theme.accent.primarySoft : undefined }}>
                         <div className="flex h-11 items-center justify-between gap-3 border-b px-3" style={{ borderColor: theme.node.stroke }}>
                             <div className="flex min-w-0 flex-1 items-center gap-2"><span className="grid size-7 shrink-0 place-items-center rounded-[var(--r-full)] border text-[var(--node-badge-fs)] font-semibold leading-none" style={{ background: node.metadata?.versionPrimary ? theme.accent.primarySoft : theme.toolbar.itemHover, borderColor: node.metadata?.versionPrimary ? theme.accent.primary : theme.node.stroke, color: node.metadata?.versionPrimary ? theme.accent.primary : theme.node.text }}>{node.metadata?.versionLabel || "-"}</span><span className="min-w-0 truncate text-xs font-semibold" title={node.title}>{node.title}</span></div>
                             {node.metadata?.versionPrimary ? <span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[var(--fs-tiny)] font-medium" style={{ color: theme.accent.primary }}><Check className="size-3" />主版本</span> : null}
                         </div>
                         <button type="button" className="block h-52 w-full overflow-hidden" style={{ background: theme.node.fill }} onClick={() => onFocus(node.id)}>
-                            {node.type === CanvasNodeType.Image && node.metadata?.content ? <img src={node.metadata.content} alt={node.title || "版本图片"} className="size-full object-contain" /> : node.type === CanvasNodeType.Video && node.metadata?.content ? <video src={node.metadata.content} className="size-full object-contain" muted preload="metadata" aria-label={node.title || "版本视频"} /> : <span className="grid size-full place-items-center px-4 text-center text-xs" style={{ color: theme.node.muted }}>点击定位到画布节点</span>}
+                            {node.type === CanvasNodeType.Image && node.metadata?.content ? <img src={node.metadata.content} alt={node.title || "版本图片"} className="size-full object-contain" /> : videoPreview ? <img src={videoPreview} alt={node.title || "版本视频"} className="size-full object-contain" loading="lazy" decoding="async" /> : <span className="grid size-full place-items-center px-4 text-center text-xs" style={{ color: theme.node.muted }}>点击定位到画布节点</span>}
                         </button>
                         <div className="space-y-2 p-3 text-[var(--fs-label)]">
                             <Info label="模型" value={node.metadata?.model || "默认模型"} />
@@ -27,7 +30,8 @@ export function CanvasVersionCompareModal({ open, versions, onClose, onSetPrimar
                             <Button block size="small" className="whitespace-nowrap" type={node.metadata?.versionPrimary ? "default" : "primary"} disabled={node.metadata?.versionPrimary} icon={<Star className="size-3.5" />} onClick={() => onSetPrimary(node.id)}>{node.metadata?.versionPrimary ? "当前主版本" : "设为主版本"}</Button>
                         </div>
                     </article>
-                ))}
+                    );
+                })}
             </div>
         </Modal>
     );
diff --git a/web/src/components/canvas/storyboard-assets-cell.tsx b/web/src/components/canvas/storyboard-assets-cell.tsx
index c252f1134..020dc8516 100644
--- a/web/src/components/canvas/storyboard-assets-cell.tsx
+++ b/web/src/components/canvas/storyboard-assets-cell.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { Modal, Tooltip } from "antd";
 import { Image as ImageIcon, Music2, Play, UserRound } from "lucide-react";
 
+import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import { isStoryboardPreviewAsset } from "@/lib/canvas/canvas-storyboard-materializer";
 import { resolveMediaUrl } from "@/services/file-storage";
 import { CanvasNodeType, type CanvasNodeData, type StoryboardAssetBinding } from "@/types/canvas";
@@ -55,13 +56,14 @@ export function StoryboardAssetsCell({ bindings, nodes, limit = 4 }: { bindings:
 }
 
 function AssetThumbnail({ node }: { node: CanvasNodeData }) {
-    const source = useNodeMediaSource(node);
+    const videoPreview = canvasNodeVideoPreviewUrl(node);
+    const source = useNodeMediaSource(node.type === CanvasNodeType.Video ? null : node);
     if (node.type === CanvasNodeType.Audio) return <Music2 className="size-4" />;
     if (node.metadata?.workflowKind === "character" && !source) return <UserRound className="size-4" />;
     if (node.type === CanvasNodeType.Video) {
-        return source ? (
+        return videoPreview ? (
             <>
-                <video src={source} muted playsInline preload="metadata" className="size-full object-cover" aria-hidden />
+                <img src={videoPreview} alt="" loading="lazy" decoding="async" draggable={false} className="size-full object-cover" />
                 <span className="absolute inset-0 grid place-items-center bg-black/15"><Play className="size-3.5 fill-white text-white" /></span>
             </>
         ) : <Play className="size-4" />;
diff --git a/web/src/components/canvas/use-resolved-canvas-resource-references.ts b/web/src/components/canvas/use-resolved-canvas-resource-references.ts
index bb7b54474..6292dd0a3 100644
--- a/web/src/components/canvas/use-resolved-canvas-resource-references.ts
+++ b/web/src/components/canvas/use-resolved-canvas-resource-references.ts
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 
 import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
-import { resolveMediaUrl } from "@/services/file-storage";
 import { resolveImageUrl } from "@/services/image-storage";
 
 type ResolvedPreview = {
@@ -59,16 +58,16 @@ export function useResolvedCanvasResourceReferences(references: CanvasResourceRe
 }
 
 function previewIdentity(reference: CanvasResourceReference) {
-    if (!reference.storageKey || !["image", "video", "character"].includes(reference.kind)) return "";
-    return `${reference.kind}:${reference.storageKey}`;
+    const storageKey = reference.kind === "video" ? reference.previewStorageKey : reference.storageKey;
+    if (!storageKey || !["image", "video", "character"].includes(reference.kind)) return "";
+    return `${reference.kind}:${storageKey}`;
 }
 
 function resolveReferencePreview(reference: CanvasResourceReference, identity: string) {
     const cached = previewPromiseCache.get(identity);
     if (cached) return cached;
-    const pending = (reference.kind === "video"
-        ? resolveMediaUrl(reference.storageKey, reference.previewUrl || "")
-        : resolveImageUrl(reference.storageKey, reference.previewUrl || "", { cacheMiss: true }))
+    const storageKey = reference.kind === "video" ? reference.previewStorageKey : reference.storageKey;
+    const pending = resolveImageUrl(storageKey, reference.previewUrl || "", { cacheMiss: true })
         .catch(() => reference.previewUrl || "")
         .then((url) => {
             if (!url) previewPromiseCache.delete(identity);
diff --git a/web/src/components/video-player.css b/web/src/components/video-player.css
index 3704f98c3..659ea1ef7 100644
--- a/web/src/components/video-player.css
+++ b/web/src/components/video-player.css
@@ -4,6 +4,20 @@
     aspect-ratio: auto;
 }
 
+.canvas-video-player {
+    position: relative;
+    isolation: isolate;
+    --canvas-video-control-size: 36px;
+    --canvas-video-control-gap: 6px;
+}
+
+.canvas-video-player[data-player-variant="compact"] {
+    --canvas-video-control-gap: 4px;
+    --video-volume-panel-width: 42px;
+    --video-volume-slider-width: 28px;
+    --video-volume-slider-max-width: 48px;
+}
+
 .canvas-video-player [data-media-provider] video {
     width: 100%;
     height: 100%;
@@ -11,11 +25,325 @@
     object-fit: contain;
 }
 
-/* 画布节点顶部还有标题和存储状态，隐藏 Vidstack 小布局的顶部控制组避免互相遮挡；全屏时恢复完整工具栏。 */
-.canvas-video-player-compact:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:first-child {
+/* 语义化定位：按控件内容识别组，避免依赖 Vidstack 组的首尾顺序。 */
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group {
+    align-items: center;
+    gap: var(--canvas-video-control-gap);
+    min-width: 0;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-slider) {
+    width: 100%;
+    padding: 0 8px;
+    margin: 0;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) {
+    display: flex;
+    width: 100%;
+    min-height: calc(var(--canvas-video-control-size) + 8px);
+    padding: 2px 8px 6px;
+    margin: 0;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-play-button,
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-fullscreen-button,
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-volume,
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-button {
+    flex: 0 0 var(--canvas-video-control-size);
+    flex-shrink: 0;
+    width: var(--canvas-video-control-size);
+    min-width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    margin: 0;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-play-button {
+    order: 1;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-time-group {
+    order: 2;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-volume {
+    order: 3;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-fullscreen-button {
+    order: 4;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-time-group {
+    flex: 0 1 auto;
+    min-width: 0;
+    margin: 0;
+    white-space: nowrap;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) .vds-volume {
+    margin-left: auto;
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-volume) .vds-volume-popup {
+    top: auto;
+    bottom: calc(100% + var(--gap, 10px));
+}
+
+/* Keep the compact vertical volume rail centered on its mute button. The
+   explicit anchor prevents browser/layout scaling from inheriting a stale
+   horizontal offset while the popup is moved above the controls row. */
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-volume .vds-volume-popup {
+    left: 50%;
+    right: auto;
+    display: grid;
+    place-items: center;
+    transform: translateX(-50%);
+}
+
+.canvas-video-player:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-volume .vds-volume-slider {
+    margin: 0;
+}
+
+/* The compact rail should read as a small control, not a tall black column.
+   Keep the hit target intact while shortening the visible rail and its panel
+   padding to match the LibTV proportions. */
+.canvas-video-player[data-player-variant="compact"] .vds-video-layout[data-sm] .vds-volume {
+    --video-volume-height: 64px;
+    --video-volume-gap: 6px;
+    /* Keep the LibTV-style volume rail visually compact. The mute button's
+       hit target remains governed by --canvas-video-control-size; these
+       values only size the popup surface and slider inside it. */
+    --video-volume-bg: rgba(12, 13, 16, 0.92);
+    --video-volume-border: 1px solid rgba(255, 255, 255, 0.12);
+    --video-volume-border-radius: 6px;
+}
+
+.canvas-video-player[data-player-variant="compact"] .vds-video-layout[data-sm] .vds-volume .vds-volume-popup {
+    box-sizing: border-box;
+    width: var(--video-volume-panel-width);
+    min-width: var(--video-volume-panel-width);
+    padding: 5px 6px;
+}
+
+/* The popup is intentionally above the button in the canvas player. Preserve
+   Vidstack's safe-area behavior on that side too, so a real mouse can cross
+   the small visual gap without closing the popup before reaching the rail. */
+.canvas-video-player[data-player-variant="compact"] .vds-video-layout[data-sm] .vds-volume .vds-volume-popup::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(-1 * var(--gap, 6px));
+    height: var(--gap, 6px);
+    pointer-events: auto;
+}
+
+.canvas-video-player[data-player-variant="compact"] .vds-video-layout[data-sm] .vds-volume .vds-volume-slider {
+    --media-slider-width: var(--video-volume-slider-width);
+}
+
+/* A confirmed silent source keeps its mute indicator as a status icon. The
+   volume controls remain visible for consistency, but are intentionally
+   unavailable so a click cannot suggest that the video gained an audio track. */
+.canvas-video-player[data-no-audio="true"] .vds-volume .vds-mute-button,
+.canvas-video-player[data-no-audio="true"] .vds-volume .vds-volume-slider {
+    opacity: 0.55;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* 画布节点保持轻量，只显示播放、时间、音量和全屏，避免窄节点中额外图标挤压布局。 */
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout .vds-controls-group > :is(.vds-caption-button, .vds-download-button, .vds-pip-button, .vds-airplay-button, .vds-google-cast-button, .vds-chapters-button) {
     display: none;
 }
 
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-volume) {
+    position: absolute;
+    right: calc(var(--canvas-video-control-size) + var(--canvas-video-control-gap) + 22px);
+    bottom: 8px;
+    width: var(--canvas-video-control-size);
+    min-height: var(--canvas-video-control-size);
+    padding: 0;
+    z-index: 50;
+    pointer-events: none;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-volume) .vds-volume {
+    pointer-events: auto;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) {
+    position: absolute;
+    inset-inline: 8px;
+    bottom: 8px;
+    width: auto;
+    min-height: var(--canvas-video-control-size);
+    padding: 0 0 0 calc(var(--canvas-video-control-size) + var(--canvas-video-control-gap) + 2px);
+    z-index: 2;
+    pointer-events: none !important;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) .vds-play-button {
+    display: none;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) .vds-fullscreen-button {
+    margin-left: auto;
+    pointer-events: auto;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) .vds-time-group {
+    pointer-events: auto;
+}
+
+/* 小布局沿用 LibTV 的单行控件：播放、时间、进度、音量、全屏共享同一底边。 */
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) {
+    position: absolute;
+    left: calc(var(--canvas-video-control-size) * 3 + var(--canvas-video-control-gap) + 40px);
+    right: calc(var(--canvas-video-control-size) * 2 + var(--canvas-video-control-gap) * 2 + 12px);
+    bottom: 8px;
+    width: auto;
+    height: var(--canvas-video-control-size);
+    min-height: var(--canvas-video-control-size);
+    padding: 0;
+    /* Keep the timeline above the video surface and below the fixed buttons.
+       The default Vidstack layout gives this group a dedicated hit layer;
+       absolute compact positioning must preserve that explicitly. */
+    z-index: 11;
+    pointer-events: auto !important;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) .vds-time-slider {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 24px;
+    pointer-events: auto !important;
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) .vds-time-slider .vds-slider-chapters,
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) .vds-time-slider .vds-slider-chapter,
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) .vds-time-slider .vds-slider-track,
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) .vds-time-slider .vds-slider-thumb {
+    pointer-events: auto;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(> .vds-play-button) {
+    position: absolute;
+    left: 8px;
+    bottom: 8px;
+    width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    min-height: var(--canvas-video-control-size);
+    padding: 0;
+    z-index: 3;
+    justify-content: center;
+    pointer-events: auto;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(> .vds-play-button) > .vds-controls-spacer {
+    display: none;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:has(> .vds-play-button) .vds-play-button {
+    flex: 0 0 var(--canvas-video-control-size);
+    width: var(--canvas-video-control-size);
+    min-width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    margin: 0;
+    transform: none;
+}
+
+/* Vidstack switches to data-lg when a node is stretched. Keep the compact
+   canvas layout stable instead of allowing the large layout to reorder icons. */
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-volume):not(:has(.vds-time-group)),
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(> .vds-play-button):not(:has(.vds-time-group)) {
+    display: none;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) {
+    position: absolute;
+    inset-inline: 8px;
+    bottom: 8px;
+    width: auto;
+    height: var(--canvas-video-control-size);
+    min-height: var(--canvas-video-control-size);
+    padding: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    gap: var(--canvas-video-control-gap);
+    pointer-events: auto;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) > .vds-controls-spacer {
+    display: none;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) .vds-play-button,
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) .vds-volume,
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) .vds-fullscreen-button,
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) .vds-button {
+    flex: 0 0 var(--canvas-video-control-size);
+    flex-shrink: 0;
+    width: var(--canvas-video-control-size);
+    min-width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    margin: 0;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) .vds-play-button {
+    order: 1;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) .vds-time-group {
+    order: 2;
+    flex: 0 1 auto;
+    min-width: 0;
+    margin: 0;
+    white-space: nowrap;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) .vds-volume {
+    order: 3;
+    margin-left: auto;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group) .vds-fullscreen-button {
+    order: 4;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-slider) {
+    position: absolute;
+    inset-inline: 8px;
+    bottom: calc(var(--canvas-video-control-size) + 12px);
+    width: auto;
+    height: 24px;
+    min-height: 24px;
+    padding: 0;
+    z-index: 11;
+    pointer-events: auto !important;
+}
+
+.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-slider) .vds-time-slider {
+    width: 100%;
+    min-width: 0;
+    pointer-events: auto !important;
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+}
+
+/* 预览弹窗沿用完整控件，但同样固定按钮和时间区域，防止弹窗窄化时发生重叠。 */
+.canvas-video-player[data-player-variant="dialog"]:not([data-fullscreen]) .vds-video-layout .vds-controls-group:has(.vds-time-group) {
+    padding-inline: 12px;
+}
+
 /* 节点内保持紧凑；全屏使用桌面播放器级别的控制尺寸，不依赖 Vidstack 小布局的默认值。 */
 .canvas-video-player[data-fullscreen],
 .canvas-video-player:fullscreen,
@@ -38,15 +366,16 @@
     padding-inline: 24px;
 }
 
-.canvas-video-player:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout .vds-controls-group:nth-last-child(2) {
+.canvas-video-player:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout .vds-controls-group:has(.vds-time-slider) {
     min-height: 64px;
     margin-bottom: -12px;
     padding-inline: 28px;
 }
 
-.canvas-video-player:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout .vds-controls-group:last-child {
+.canvas-video-player:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout .vds-controls-group:has(.vds-time-group) {
     min-height: 82px;
     gap: 4px;
+    margin: 0;
     padding: 8px 24px max(12px, env(safe-area-inset-bottom));
 }
 
@@ -107,8 +436,183 @@
         font-size: 16px;
     }
 
-    .canvas-video-player:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout .vds-controls-group:last-child {
+    .canvas-video-player:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout .vds-controls-group:has(.vds-time-group) {
         min-height: 72px;
         padding-inline: 12px;
     }
 }
+
+/* The compact canvas player keeps the same control order in fullscreen as it
+   does inside a node: play, time, volume, fullscreen. Vidstack's small layout
+   renders these controls in separate groups, so pin each group explicitly
+   instead of relying on the group's DOM order. */
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) {
+    --canvas-video-control-size: 60px;
+    --canvas-video-control-gap: 8px;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--canvas-video-control-gap);
+}
+
+/* Only the volume control survives from the small layout's top group. */
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-volume) {
+    position: absolute;
+    right: calc(var(--canvas-video-control-size) + var(--canvas-video-control-gap) + 24px);
+    bottom: max(12px, env(safe-area-inset-bottom));
+    width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    min-height: var(--canvas-video-control-size);
+    padding: 0;
+    z-index: 50;
+    display: flex;
+    justify-content: center;
+    pointer-events: none;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-volume) > :not(.vds-volume) {
+    display: none !important;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-volume) .vds-volume {
+    flex: 0 0 var(--canvas-video-control-size);
+    width: var(--canvas-video-control-size);
+    min-width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    pointer-events: auto;
+}
+
+/* Keep the vertical rail above the volume button in fullscreen as well. */
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-volume .vds-volume-popup {
+    top: auto;
+    bottom: calc(100% + var(--gap, 6px));
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+    width: var(--video-volume-panel-width, 42px);
+    min-width: var(--video-volume-panel-width, 42px);
+    padding: 5px 6px;
+}
+
+/* The center group contains only the play button in the compact layout. */
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(> .vds-play-button) {
+    position: absolute;
+    left: 24px;
+    bottom: max(12px, env(safe-area-inset-bottom));
+    width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    min-height: var(--canvas-video-control-size);
+    padding: 0;
+    z-index: 3;
+    display: flex;
+    justify-content: center;
+    pointer-events: auto !important;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(> .vds-play-button) > .vds-controls-spacer {
+    display: none;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(> .vds-play-button) .vds-play-button {
+    flex: 0 0 var(--canvas-video-control-size);
+    width: var(--canvas-video-control-size);
+    min-width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    margin: 0;
+    transform: none;
+}
+
+/* Time and fullscreen share the bottom row; the time text may shrink but the
+   fullscreen button always keeps its target size. */
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) {
+    position: absolute;
+    inset-inline: 24px;
+    bottom: max(12px, env(safe-area-inset-bottom));
+    width: auto;
+    height: var(--canvas-video-control-size);
+    min-height: var(--canvas-video-control-size);
+    margin: 0;
+    padding: 0 0 0 calc(var(--canvas-video-control-size) + var(--canvas-video-control-gap) + 2px);
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    pointer-events: none !important;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) > .vds-controls-spacer,
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) .vds-chapter-title {
+    display: none;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) .vds-time-group {
+    order: 2;
+    flex: 0 1 auto;
+    min-width: 0;
+    margin: 0;
+    white-space: nowrap;
+    pointer-events: auto;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) .vds-fullscreen-button {
+    order: 4;
+    flex: 0 0 var(--canvas-video-control-size);
+    width: var(--canvas-video-control-size);
+    min-width: var(--canvas-video-control-size);
+    height: var(--canvas-video-control-size);
+    margin-left: auto;
+    pointer-events: auto;
+}
+
+/* Keep fullscreen controls in the same single-row order as the compact node:
+   play, time, progress, volume, fullscreen. The progress rail stays between
+   the time and volume controls instead of moving to a separate upper row. */
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) {
+    position: absolute;
+    left: calc(var(--canvas-video-control-size) * 3 + var(--canvas-video-control-gap) + 40px);
+    right: calc(var(--canvas-video-control-size) * 2 + var(--canvas-video-control-gap) * 2 + 28px);
+    bottom: max(12px, env(safe-area-inset-bottom));
+    width: auto;
+    height: var(--canvas-video-control-size);
+    min-height: var(--canvas-video-control-size) !important;
+    margin: 0;
+    padding: 0;
+    z-index: 11;
+    pointer-events: auto !important;
+}
+
+.canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) .vds-time-slider {
+    width: 100%;
+    height: var(--canvas-video-control-size);
+    min-width: 0;
+    pointer-events: auto !important;
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 599px) {
+    .canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) {
+        --canvas-video-control-size: 52px;
+    }
+
+    .canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-volume) {
+        right: calc(var(--canvas-video-control-size) + var(--canvas-video-control-gap) + 12px);
+    }
+
+    .canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-group) {
+        inset-inline: 12px;
+        padding-left: calc(var(--canvas-video-control-size) + var(--canvas-video-control-gap) + 2px);
+    }
+
+    .canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(> .vds-play-button) {
+        left: 12px;
+    }
+
+    .canvas-video-player[data-player-variant="compact"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout[data-sm] .vds-controls-group:has(.vds-time-slider) {
+        left: calc(var(--canvas-video-control-size) * 3 + var(--canvas-video-control-gap) + 28px);
+        right: calc(var(--canvas-video-control-size) * 2 + var(--canvas-video-control-gap) * 2 + 20px);
+    }
+}
diff --git a/web/src/components/video-player.tsx b/web/src/components/video-player.tsx
index 5883f1197..fc98885ed 100644
--- a/web/src/components/video-player.tsx
+++ b/web/src/components/video-player.tsx
@@ -1,7 +1,8 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { ComponentProps } from "react";
-import { MediaPlayer, MediaProvider, type VideoMimeType } from "@vidstack/react";
+import { isVideoProvider, MediaPlayer, MediaProvider, type MediaPlayerInstance, type VideoMimeType } from "@vidstack/react";
 import { DefaultVideoLayout, defaultLayoutIcons, type DefaultLayoutTranslations } from "@vidstack/react/player/layouts/default";
+import { detectVideoAudioTrack, detectVideoAudioTrackFromUrl } from "@/lib/video-poster";
 import "@vidstack/react/player/styles/base.css";
 import "@vidstack/react/player/styles/default/theme.css";
 import "@vidstack/react/player/styles/default/layouts/video.css";
@@ -19,6 +20,8 @@ type VideoPlayerProps = {
     autoPlay?: boolean;
     dataCanvasNoZoom?: boolean;
     compactControls?: boolean;
+    /** Explicitly marks videos known to have an audio track (or not). */
+    hasAudio?: boolean;
     onCanPlay?: MediaPlayerProps["onCanPlay"];
 };
 
@@ -70,33 +73,170 @@ const supportedVideoMimeTypes = new Set<VideoMimeType>(["video/mp4", "video/webm
  * 统一视频播放表面，保留原生媒体 URL 契约，同时提供可访问的完整控件布局。
  * 画布节点需要隔离播放器手势，避免拖动进度条时被误判为拖动画布。
  */
-export function VideoPlayer({ src, mimeType, title = "视频", className, brandColor = "#f5f5f5", preload = "metadata", autoPlay = false, dataCanvasNoZoom = false, compactControls = false, onCanPlay }: VideoPlayerProps) {
-    const stopCanvasControlInteraction = (event: { target: EventTarget | null; stopPropagation: () => void }) => {
-        if (!dataCanvasNoZoom || !(event.target instanceof Element)) return;
-        if (event.target.closest(".vds-controls,.vds-menu-items")) event.stopPropagation();
+export function VideoPlayer({ src, mimeType, title = "视频", className, brandColor = "#f5f5f5", preload = "metadata", autoPlay = false, dataCanvasNoZoom = false, compactControls = false, hasAudio, onCanPlay }: VideoPlayerProps) {
+    const [detectedHasAudio, setDetectedHasAudio] = useState<boolean | undefined>(undefined);
+    const autoPlayAttemptedRef = useRef(false);
+    const audioProbeGenerationRef = useRef(0);
+    const mediaPlayerRef = useRef<MediaPlayerInstance>(null);
+    // Match LibTV's conservative rule: only explicit/container-confirmed
+    // silence mutes the player. Runtime probes are used to confirm audio and
+    // correct stale persisted `false`, but a negative/unknown probe never
+    // forces an otherwise-unknown video into the muted state.
+    // A conclusive container probe wins over stale persisted metadata in
+    // either direction. Browser runtime probes remain conservative when they
+    // cannot expose an audio-track list.
+    const effectiveHasAudio = detectedHasAudio === false ? false : hasAudio === true || detectedHasAudio === true ? true : hasAudio === false ? false : undefined;
+    const noAudio = effectiveHasAudio === false;
+    const layoutIcons = useMemo(() => {
+        if (!noAudio) return defaultLayoutIcons;
+        // Vidstack chooses the volume icon from its internal media state. That
+        // state can briefly lag behind an explicit `hasAudio: false` prop, so
+        // keep all volume variants visually muted for known silent videos.
+        return {
+            ...defaultLayoutIcons,
+            MuteButton: {
+                ...defaultLayoutIcons.MuteButton,
+                VolumeLow: defaultLayoutIcons.MuteButton.Mute,
+                VolumeHigh: defaultLayoutIcons.MuteButton.Mute,
+            },
+        };
+    }, [noAudio]);
+
+    useEffect(() => {
+        setDetectedHasAudio(undefined);
+        autoPlayAttemptedRef.current = false;
+        audioProbeGenerationRef.current += 1;
+    }, [src]);
+
+    useEffect(() => {
+        const player = mediaPlayerRef.current?.el;
+        if (!player) return;
+        // Vidstack exposes these controls as custom elements. Setting their
+        // disabled state after layout creation keeps both pointer and keyboard
+        // access consistent when an audio-track probe resolves asynchronously.
+        const muteButton = player.querySelector<HTMLButtonElement>(".vds-mute-button");
+        if (muteButton) {
+            muteButton.disabled = noAudio;
+            muteButton.setAttribute("aria-disabled", String(noAudio));
+        }
+        const volumeSlider = player.querySelector<HTMLElement>(".vds-volume-slider");
+        if (volumeSlider) {
+            (volumeSlider as HTMLElement & { disabled?: boolean }).disabled = noAudio;
+            volumeSlider.setAttribute("aria-disabled", String(noAudio));
+        }
+    }, [noAudio]);
+
+    const probeRemoteAudioTrack = () => {
+        if (hasAudio === false) return;
+        const generation = audioProbeGenerationRef.current;
+        void detectVideoAudioTrackFromUrl(src).then((detected) => {
+            if (generation === audioProbeGenerationRef.current && detected !== undefined) setDetectedHasAudio(detected);
+        });
+    };
+
+    const stopCanvasControlInteraction = (event: { target: EventTarget | null; nativeEvent?: Event; stopPropagation: () => void; preventDefault?: () => void }) => {
+        if (!isPlayerControlEvent(event)) return;
+        if (noAudio && isVolumeControlEvent(event)) {
+            event.preventDefault?.();
+            event.stopPropagation();
+            return;
+        }
+        if (dataCanvasNoZoom) event.stopPropagation();
+    };
+    const stopCanvasControlClick = (event: React.MouseEvent) => {
+        if (!isPlayerControlEvent(event)) return;
+        if (noAudio && isVolumeControlEvent(event)) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (dataCanvasNoZoom) event.stopPropagation();
     };
     const type = mimeType && supportedVideoMimeTypes.has(mimeType as VideoMimeType) ? (mimeType as VideoMimeType) : "video/mp4";
     const mediaSource = useMemo(() => ({ src, type }), [src, type]);
+    const handleCanPlay = (detail: Parameters<NonNullable<MediaPlayerProps["onCanPlay"]>>[0], event: Parameters<NonNullable<MediaPlayerProps["onCanPlay"]>>[1]) => {
+        const provider = event.target.provider;
+        const media = isVideoProvider(provider) ? provider.media : undefined;
+        const detected = media ? detectVideoAudioTrack(media) : undefined;
+        if (detected !== undefined) setDetectedHasAudio(detected);
+        else probeRemoteAudioTrack();
+        // `canplay` may fire again after buffering or seeking. Only the first
+        // event may satisfy the activation autoplay intent; later events must
+        // not override a user pause.
+        if (autoPlay && !autoPlayAttemptedRef.current) {
+            autoPlayAttemptedRef.current = true;
+            void event.target.play().catch(() => undefined);
+        }
+        onCanPlay?.(detail, event);
+    };
 
     return (
         <MediaPlayer
             className={`canvas-video-player ${compactControls ? "canvas-video-player-compact" : ""} ${className || ""}`}
+            data-player-variant={compactControls ? "compact" : "dialog"}
+            ref={mediaPlayerRef}
             src={mediaSource}
             title={title}
             viewType="video"
             streamType="on-demand"
             playsInline
             autoPlay={autoPlay}
+            muted={noAudio ? true : undefined}
             load="eager"
             preload={preload}
             data-canvas-no-zoom={dataCanvasNoZoom ? "true" : undefined}
+            data-no-audio={noAudio ? "true" : undefined}
             style={{ "--video-brand": brandColor }}
-            onCanPlay={onCanPlay}
+            onCanPlay={handleCanPlay}
+            onLoadedMetadata={(event) => {
+                const provider = event.target.provider;
+                const media = isVideoProvider(provider) ? provider.media : undefined;
+                const detected = media ? detectVideoAudioTrack(media) : undefined;
+                if (detected !== undefined) setDetectedHasAudio(detected);
+                else probeRemoteAudioTrack();
+            }}
+            onLoadedData={(event) => {
+                const provider = event.target.provider;
+                const media = isVideoProvider(provider) ? provider.media : undefined;
+                const detected = media ? detectVideoAudioTrack(media) : undefined;
+                if (detected !== undefined) setDetectedHasAudio(detected);
+                else probeRemoteAudioTrack();
+            }}
             onPointerDown={stopCanvasControlInteraction}
             onMouseDown={stopCanvasControlInteraction}
+            onClick={stopCanvasControlClick}
+            onKeyDown={stopCanvasControlInteraction}
         >
             <MediaProvider />
-            <DefaultVideoLayout icons={defaultLayoutIcons} translations={zhCNTranslations} />
+            <DefaultVideoLayout
+                icons={layoutIcons}
+                translations={zhCNTranslations}
+                // Canvas controls use one stable DOM arrangement regardless
+                // of the node's aspect ratio. Without this override Vidstack
+                // swaps between its small and large layouts as the node is
+                // resized, moving the same icons to different groups.
+                smallLayoutWhen={compactControls ? true : undefined}
+                // The canvas selects and mounts a player from the node's
+                // pointer event. Vidstack's default pointerup gesture can
+                // otherwise toggle the freshly mounted player a second time,
+                // causing the intermittent play-then-pause-at-zero bug.
+                noGestures={dataCanvasNoZoom}
+                slots={{
+                    // 节点外部已经显示标题，播放器内不再重复渲染章节标题和设置菜单。
+                    chapterTitle: null,
+                    settingsMenu: null,
+                }}
+            />
         </MediaPlayer>
     );
 }
+
+function isPlayerControlEvent(event: { target: EventTarget | null; nativeEvent?: Event }) {
+    if (event.target instanceof Element && event.target.closest(".vds-controls,.vds-menu-items")) return true;
+    return event.nativeEvent?.composedPath?.().some((item) => item instanceof Element && Boolean(item.closest(".vds-controls,.vds-menu-items"))) || false;
+}
+
+function isVolumeControlEvent(event: { target: EventTarget | null; nativeEvent?: Event }) {
+    if (event.target instanceof Element && event.target.closest(".vds-volume,.vds-mute-button,.vds-volume-slider")) return true;
+    return event.nativeEvent?.composedPath?.().some((item) => item instanceof Element && Boolean(item.closest(".vds-volume,.vds-mute-button,.vds-volume-slider"))) || false;
+}
diff --git a/web/src/lib/canvas/canvas-asset-handoff.ts b/web/src/lib/canvas/canvas-asset-handoff.ts
index fbeb1de31..45c5a2be1 100644
--- a/web/src/lib/canvas/canvas-asset-handoff.ts
+++ b/web/src/lib/canvas/canvas-asset-handoff.ts
@@ -43,6 +43,7 @@ export function canvasAssetHandoffPayloads(assets: Asset[], assetIds: Iterable<s
                 width: asset.data.width,
                 height: asset.data.height,
                 durationMs: asset.data.durationMs,
+                hasAudio: asset.data.hasAudio,
                 bytes: asset.data.bytes,
                 mimeType: asset.data.mimeType,
                 assetId: asset.id,
diff --git a/web/src/lib/canvas/canvas-generation-task-sync.ts b/web/src/lib/canvas/canvas-generation-task-sync.ts
index 77854d927..7542fdc7d 100644
--- a/web/src/lib/canvas/canvas-generation-task-sync.ts
+++ b/web/src/lib/canvas/canvas-generation-task-sync.ts
@@ -66,6 +66,15 @@ export function videoMetadata(video: UploadedFile): CanvasNodeMetadata {
         bytes: video.bytes,
         mimeType: video.mimeType || "video/mp4",
         durationMs: video.durationMs,
+        hasAudio: video.hasAudio,
+        videoPreview: video.preview ? {
+            content: video.preview.url,
+            storageKey: video.preview.storageKey,
+            width: video.preview.width,
+            height: video.preview.height,
+            bytes: video.preview.bytes,
+            mimeType: video.preview.mimeType,
+        } : undefined,
         errorDetails: undefined,
         generationErrorCode: undefined,
         resourceReloadAvailable: undefined,
diff --git a/web/src/lib/canvas/canvas-media-preview.ts b/web/src/lib/canvas/canvas-media-preview.ts
new file mode 100644
index 000000000..43e4906d5
--- /dev/null
+++ b/web/src/lib/canvas/canvas-media-preview.ts
@@ -0,0 +1,23 @@
+import { buildLibTVVideoPreviewUrl } from "@/lib/canvas/libtv-import";
+import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
+
+/**
+ * Returns an image source that is safe to mount for a passive video preview.
+ * The original video URL is deliberately never returned: callers must fall
+ * back to a video icon instead of creating a decoder outside the active node.
+ */
+export function canvasNodeVideoPreviewUrl(node: CanvasNodeData) {
+    if (node.type !== CanvasNodeType.Video) return "";
+    const content = node.metadata?.content || "";
+    const generatedPreview = node.metadata?.videoPreview?.content || "";
+    if (generatedPreview && generatedPreview !== content) return generatedPreview;
+    const explicitPreview = node.metadata?.previewContent || "";
+    if (explicitPreview && explicitPreview !== content) return explicitPreview;
+    return buildLibTVVideoPreviewUrl(content);
+}
+
+export function canvasVideoAssetPreviewUrl(videoUrl: string, coverUrl?: string) {
+    const explicitCover = coverUrl?.trim() || "";
+    if (explicitCover && explicitCover !== videoUrl) return explicitCover;
+    return buildLibTVVideoPreviewUrl(videoUrl);
+}
diff --git a/web/src/lib/canvas/canvas-node-asset.ts b/web/src/lib/canvas/canvas-node-asset.ts
index 2a5f48d1c..e91648af4 100644
--- a/web/src/lib/canvas/canvas-node-asset.ts
+++ b/web/src/lib/canvas/canvas-node-asset.ts
@@ -1,4 +1,5 @@
 import { getDataUrlByteSize } from "@/lib/image-utils";
+import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import type { Asset, AssetCategory, NewAsset } from "@/stores/use-asset-store";
 import { CanvasNodeType, type CanvasNodeData, type CanvasNodeTypeId } from "@/types/canvas";
 
@@ -24,7 +25,7 @@ export function canvasNodeToAsset(node: CanvasNodeData, options: CanvasNodeAsset
     };
     const base = {
         title,
-        coverUrl: node.type === CanvasNodeType.Image ? content : "",
+        coverUrl: node.type === CanvasNodeType.Image ? content : node.type === CanvasNodeType.Video ? canvasNodeVideoPreviewUrl(node) : "",
         tags: node.metadata?.assetTags || [],
         category: canvasNodeAssetCategory(node),
         status: "confirmed" as const,
@@ -60,6 +61,7 @@ export function canvasNodeToAsset(node: CanvasNodeData, options: CanvasNodeAsset
                 width: node.metadata?.naturalWidth || node.width,
                 height: node.metadata?.naturalHeight || node.height,
                 durationMs: node.metadata?.durationMs,
+                hasAudio: node.metadata?.hasAudio,
                 bytes: node.metadata?.bytes || 0,
                 mimeType: node.metadata?.mimeType || "video/mp4",
             },
diff --git a/web/src/lib/canvas/canvas-node-stack-order.ts b/web/src/lib/canvas/canvas-node-stack-order.ts
new file mode 100644
index 000000000..7f832b639
--- /dev/null
+++ b/web/src/lib/canvas/canvas-node-stack-order.ts
@@ -0,0 +1,25 @@
+export type CanvasNodeStackOrder = string[];
+
+/**
+ * Keeps the most recently interacted node at the end of the paint order.
+ * This is session-local UI state and is intentionally not persisted with the
+ * canvas document.
+ */
+export function bringCanvasNodeToFront(order: CanvasNodeStackOrder, nodeId: string): CanvasNodeStackOrder {
+    if (!nodeId) return order;
+    if (order.at(-1) === nodeId) return order;
+    return [...order.filter((id) => id !== nodeId), nodeId];
+}
+
+/**
+ * Applies the interaction order while preserving the relative order of nodes
+ * that have not been interacted with yet.
+ */
+export function sortCanvasNodesByStackOrder<T extends { id: string }>(nodes: T[], order: CanvasNodeStackOrder): T[] {
+    if (nodes.length < 2 || order.length === 0) return nodes;
+    const rankById = new Map(order.map((id, index) => [id, index]));
+    return nodes
+        .map((node, index) => ({ node, index, rank: rankById.get(node.id) ?? -1 }))
+        .sort((left, right) => left.rank - right.rank || left.index - right.index)
+        .map(({ node }) => node);
+}
diff --git a/web/src/lib/canvas/canvas-node-timestamps.ts b/web/src/lib/canvas/canvas-node-timestamps.ts
index 26b73e69a..8a38ac6ab 100644
--- a/web/src/lib/canvas/canvas-node-timestamps.ts
+++ b/web/src/lib/canvas/canvas-node-timestamps.ts
@@ -13,6 +13,8 @@ const HYDRATED_MEDIA_KEYS = new Set<keyof CanvasNodeMetadata>([
     "bytes",
     "mimeType",
     "durationMs",
+    "hasAudio",
+    "videoPreview",
     "drawingPreviewUrl",
 ]);
 
diff --git a/web/src/lib/canvas/canvas-performance-mode.ts b/web/src/lib/canvas/canvas-performance-mode.ts
index 605a9ab53..a61fe286d 100644
--- a/web/src/lib/canvas/canvas-performance-mode.ts
+++ b/web/src/lib/canvas/canvas-performance-mode.ts
@@ -25,3 +25,11 @@ export function shouldReduceCanvasMediaEffects(mode: CanvasMediaPerformanceMode,
     const mediaCount = nodes.filter((node) => node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio).length;
     return nodes.length >= 80 || mediaCount >= 32;
 }
+
+export function resolveActiveCanvasMediaNodeId(selectedNodeIds: ReadonlySet<string>, nodeById: ReadonlyMap<string, CanvasNodeData>) {
+    if (selectedNodeIds.size !== 1) return null;
+    const nodeId = selectedNodeIds.values().next().value;
+    if (!nodeId) return null;
+    const type = nodeById.get(nodeId)?.type;
+    return type === CanvasNodeType.Video || type === CanvasNodeType.Audio ? nodeId : null;
+}
diff --git a/web/src/lib/canvas/canvas-project-generation.ts b/web/src/lib/canvas/canvas-project-generation.ts
index 8777db0a5..ebcb69149 100644
--- a/web/src/lib/canvas/canvas-project-generation.ts
+++ b/web/src/lib/canvas/canvas-project-generation.ts
@@ -354,7 +354,11 @@ export async function hydrateCanvasImages(nodes: CanvasNodeData[]) {
     return Promise.all(
         nodes.map(async (node) => {
             const content = node.metadata?.content;
-            if ((node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio) && node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveMediaUrl(node.metadata.storageKey, content) } };
+            const videoPreview = node.type === CanvasNodeType.Video && node.metadata?.videoPreview?.storageKey
+                ? { ...node.metadata.videoPreview, content: await resolveImageUrl(node.metadata.videoPreview.storageKey, node.metadata.videoPreview.content, { cacheMiss: true }) }
+                : node.metadata?.videoPreview;
+            if ((node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio) && node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveMediaUrl(node.metadata.storageKey, content), videoPreview } };
+            if (videoPreview !== node.metadata?.videoPreview) return { ...node, metadata: { ...node.metadata, videoPreview } };
             if (node.type === CanvasNodeType.Image && node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveImageUrl(node.metadata.storageKey, content, { cacheMiss: true }) } };
             if (node.type !== CanvasNodeType.Image || !content) return node;
             if (!content.startsWith("data:image/")) return node;
diff --git a/web/src/lib/canvas/canvas-resource-references.ts b/web/src/lib/canvas/canvas-resource-references.ts
index ca6850f95..6c2455c47 100644
--- a/web/src/lib/canvas/canvas-resource-references.ts
+++ b/web/src/lib/canvas/canvas-resource-references.ts
@@ -1,4 +1,5 @@
 import { imageReferenceLabel } from "@/lib/image-reference-prompt";
+import { canvasNodeVideoPreviewUrl, canvasVideoAssetPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import { getNodeResourceKind } from "@/lib/canvas/node-registry";
 import { seedanceReferenceLabel } from "@/lib/seedance-video";
 import type { Skill } from "@/services/api/skills";
@@ -14,7 +15,11 @@ export type CanvasResourceReference = {
     label: string;
     title: string;
     previewUrl?: string;
+    /** 仅素材库视频在没有静态封面时使用的首帧回退源。 */
+    mediaUrl?: string;
     storageKey?: string;
+    /** 视频首帧是独立的图片资源，不能用视频 storageKey 解析。 */
+    previewStorageKey?: string;
     text?: string;
     active: boolean;
     sourceType?: CanvasNodeTypeId;
@@ -50,7 +55,7 @@ export function buildAssetMentionReferences(assets: Asset[]): CanvasResourceRefe
     return assets.flatMap((asset): CanvasResourceReference[] => {
         if (asset.kind === "model") return [];
         const kind: CanvasResourceKind = asset.kind === "entity" ? "character" : asset.kind;
-        const previewUrl = asset.kind === "image" ? asset.data.dataUrl : asset.kind === "video" ? asset.data.url : asset.coverUrl;
+        const previewUrl = asset.kind === "image" ? asset.data.dataUrl : asset.kind === "video" ? canvasVideoAssetPreviewUrl(asset.data.url, asset.coverUrl) : asset.coverUrl;
         const text = asset.kind === "text" ? asset.data.content : undefined;
         return [{
             id: `asset:${asset.id}`,
@@ -60,6 +65,7 @@ export function buildAssetMentionReferences(assets: Asset[]): CanvasResourceRefe
             label: asset.title,
             title: asset.title,
             previewUrl,
+            mediaUrl: asset.kind === "video" && !previewUrl ? asset.data.url : undefined,
             storageKey: "storageKey" in asset.data ? asset.data.storageKey : undefined,
             text,
             active: false,
@@ -148,8 +154,15 @@ function labelResourceNodes(nodes: CanvasNodeData[], active: boolean) {
                 kind,
                 label,
                 title: node.title || label,
-                previewUrl: node.metadata?.workflowKind === "character" ? node.metadata.characterCoverUrl : node.type === CanvasNodeType.Drawing ? node.metadata?.drawingPreviewUrl : node.metadata?.previewContent || node.metadata?.content,
+                previewUrl: node.metadata?.workflowKind === "character"
+                    ? node.metadata.characterCoverUrl
+                    : node.type === CanvasNodeType.Drawing
+                      ? node.metadata?.drawingPreviewUrl
+                      : node.type === CanvasNodeType.Video
+                        ? canvasNodeVideoPreviewUrl(node)
+                        : node.metadata?.previewContent || node.metadata?.content,
                 storageKey: node.metadata?.storageKey,
+                previewStorageKey: node.type === CanvasNodeType.Video ? node.metadata?.videoPreview?.storageKey : undefined,
                 text: node.metadata?.workflowKind === "character" ? node.metadata.characterPrompt : node.type === CanvasNodeType.Text ? node.metadata?.content || node.metadata?.prompt : node.type === CanvasNodeType.Skill ? skillResourceText(node) : undefined,
                 active,
                 sourceType: node.type,
diff --git a/web/src/lib/canvas/libtv-import.ts b/web/src/lib/canvas/libtv-import.ts
index d614a2c7a..8af291b73 100644
--- a/web/src/lib/canvas/libtv-import.ts
+++ b/web/src/lib/canvas/libtv-import.ts
@@ -1,6 +1,7 @@
 const LIBTV_PROJECT_UUID_PATTERN = /^[a-f0-9]{32}$/i;
 const LIBTV_RESOURCE_HOST = "libtv-res.liblib.art";
 const LIBTV_PREVIEW_WIDTH = 960;
+const LIBTV_VIDEO_PREVIEW_WIDTH = 400;
 
 export function parseLibTVProjectUUID(value: string) {
     const trimmed = value.trim();
@@ -34,3 +35,32 @@ export function buildLibTVImagePreviewUrl(rawUrl: string) {
         return rawUrl;
     }
 }
+
+export function buildLibTVVideoPreviewUrl(rawUrl: string) {
+    try {
+        const url = new URL(rawUrl);
+        if (url.protocol !== "https:" || url.hostname !== LIBTV_RESOURCE_HOST) return "";
+        if (!url.searchParams.has("x-oss-process")) {
+            url.searchParams.set("x-oss-process", `video/snapshot,t_0,f_jpg,w_${LIBTV_VIDEO_PREVIEW_WIDTH},m_fast,ar_auto`);
+        }
+        return url.toString();
+    } catch {
+        return "";
+    }
+}
+
+/**
+ * Restores the playable LibTV asset URL when a snapshot transform was
+ * persisted as the node's content by an older importer.  The OSS transform
+ * belongs only on previewContent; VideoPlayer must receive the original MP4.
+ */
+export function buildLibTVVideoSourceUrl(rawUrl: string) {
+    try {
+        const url = new URL(rawUrl);
+        if (url.protocol !== "https:" || url.hostname !== LIBTV_RESOURCE_HOST) return rawUrl;
+        url.searchParams.delete("x-oss-process");
+        return url.toString();
+    } catch {
+        return rawUrl;
+    }
+}
diff --git a/web/src/lib/video-poster.ts b/web/src/lib/video-poster.ts
new file mode 100644
index 000000000..6b2705815
--- /dev/null
+++ b/web/src/lib/video-poster.ts
@@ -0,0 +1,308 @@
+export type CapturedVideoPoster = {
+    width: number;
+    height: number;
+    durationMs?: number;
+    hasAudio?: boolean;
+    poster?: Blob;
+};
+
+type CaptureVideoPosterOptions = {
+    signal?: AbortSignal;
+    maxWidth?: number;
+    timeoutMs?: number;
+};
+
+const MAX_MP4_AUDIO_PROBE_BYTES = 32 * 1024 * 1024;
+const MP4_AUDIO_PROBE_RANGE_BYTES = 1024 * 1024;
+
+const videoAudioProbeCache = new Map<string, Promise<boolean | undefined>>();
+
+let captureQueue: Promise<void> = Promise.resolve();
+
+/** Serializes browser video decoding so batch uploads and poster hydration never fan out decoders. */
+export function captureVideoPoster(source: string, options: CaptureVideoPosterOptions = {}) {
+    const capture = captureQueue.then(() => captureVideoPosterNow(source, options));
+    captureQueue = capture.then(() => undefined, () => undefined);
+    return capture;
+}
+
+function captureVideoPosterNow(source: string, options: CaptureVideoPosterOptions) {
+    return new Promise<CapturedVideoPoster>((resolve, reject) => {
+        const signal = options.signal;
+        if (signal?.aborted) {
+            reject(abortError());
+            return;
+        }
+
+        const video = document.createElement("video");
+        const fallback = { width: 1280, height: 720 };
+        let settled = false;
+        let metadata: Omit<CapturedVideoPoster, "poster"> = fallback;
+
+        const cleanup = () => {
+            window.clearTimeout(timeoutId);
+            signal?.removeEventListener("abort", handleAbort);
+            video.onloadedmetadata = null;
+            video.onloadeddata = null;
+            video.onerror = null;
+            video.pause();
+            video.removeAttribute("src");
+            video.load();
+        };
+        const finish = (result: CapturedVideoPoster) => {
+            if (settled) return;
+            settled = true;
+            cleanup();
+            resolve(result);
+        };
+        const fail = (error: Error) => {
+            if (settled) return;
+            settled = true;
+            cleanup();
+            reject(error);
+        };
+        const readMetadata = () => {
+            metadata = {
+                width: video.videoWidth || fallback.width,
+                height: video.videoHeight || fallback.height,
+                durationMs: Number.isFinite(video.duration) ? Math.round(video.duration * 1000) : undefined,
+                hasAudio: detectVideoAudioTrack(video),
+            };
+        };
+        const handleAbort = () => fail(abortError());
+        const timeoutId = window.setTimeout(() => finish(metadata), options.timeoutMs ?? 15_000);
+
+        signal?.addEventListener("abort", handleAbort, { once: true });
+        video.preload = "auto";
+        video.muted = true;
+        video.playsInline = true;
+        if (isCrossOriginHttpUrl(source)) video.crossOrigin = "anonymous";
+        video.onloadedmetadata = readMetadata;
+        video.onerror = () => finish(metadata);
+        video.onloadeddata = () => {
+            readMetadata();
+            if (signal?.aborted) {
+                fail(abortError());
+                return;
+            }
+            const maxWidth = Math.max(1, options.maxWidth ?? 400);
+            const width = Math.max(1, Math.min(metadata.width, maxWidth));
+            const height = Math.max(1, Math.round(width * metadata.height / Math.max(1, metadata.width)));
+            const canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            const context = canvas.getContext("2d");
+            if (!context) {
+                finish(metadata);
+                return;
+            }
+            try {
+                context.fillStyle = "#000";
+                context.fillRect(0, 0, width, height);
+                context.drawImage(video, 0, 0, width, height);
+                canvas.toBlob((poster) => finish({ ...metadata, poster: poster || undefined }), "image/jpeg", 0.82);
+            } catch {
+                // Cross-origin videos without CORS can still expose metadata but cannot be drawn safely.
+                finish(metadata);
+            }
+        };
+        video.src = source;
+        video.load();
+    });
+}
+
+function isCrossOriginHttpUrl(source: string) {
+    try {
+        const url = new URL(source, window.location.href);
+        return /^https?:$/.test(url.protocol) && url.origin !== window.location.origin;
+    } catch {
+        return false;
+    }
+}
+
+/** Audio track inspection is not standardized across browsers. */
+export function detectVideoAudioTrack(video: HTMLMediaElement): boolean | undefined {
+    const tracks = (video as HTMLVideoElement & { audioTracks?: { length: number } }).audioTracks;
+    if (tracks && typeof tracks.length === "number") {
+        // A zero-length list before media data is loaded can mean that the
+        // browser has not populated its native track list yet.
+        if (tracks.length > 0) return true;
+        // Do not treat an empty list as proof of silence. Chromium-based
+        // browsers can expose AudioTrackList while leaving it empty even for
+        // a video that has an audio stream; continue with the other probes.
+    }
+
+    const mozHasAudio = (video as HTMLVideoElement & { mozHasAudio?: boolean }).mozHasAudio;
+    if (typeof mozHasAudio === "boolean") return mozHasAudio;
+
+    // Chromium and WebKit expose this legacy counter on media elements. It is
+    // meaningful once media data is available; before that point zero only
+    // means that decoding has not started yet.
+    const webkitAudioDecodedByteCount = (video as HTMLVideoElement & { webkitAudioDecodedByteCount?: number }).webkitAudioDecodedByteCount;
+    if (typeof webkitAudioDecodedByteCount === "number" && video.readyState >= 3 && webkitAudioDecodedByteCount > 0) return true;
+
+    const captureStream = (video as HTMLVideoElement & { captureStream?: () => MediaStream }).captureStream;
+    if (typeof captureStream === "function") {
+        try {
+            const audioTracks = captureStream.call(video).getAudioTracks();
+            if (audioTracks.length > 0) return true;
+        } catch {
+            // Some browsers expose captureStream but reject it for remote media.
+        }
+    }
+    return undefined;
+}
+
+/**
+ * Inspects the ISO-BMFF track headers without decoding the media. This is a
+ * bounded fallback for local MP4/MOV uploads where browsers expose no audio
+ * track API. Remote sources are intentionally not fetched by this helper.
+ */
+export async function detectVideoAudioTrackFromBlob(blob: Blob): Promise<boolean | undefined> {
+    if (!isIsoBmffVideoType(blob.type) || blob.size <= 0 || blob.size > MAX_MP4_AUDIO_PROBE_BYTES) return undefined;
+    try {
+        const bytes = new Uint8Array(await blob.arrayBuffer());
+        return parseIsoBmffAudioTrack(bytes);
+    } catch {
+        return undefined;
+    }
+}
+
+/**
+ * Probes a remote MP4/MOV without downloading the whole file when possible.
+ * The browser media element does not expose a portable audio-track API, while
+ * LibTV assets are CORS-enabled and expose ISO-BMFF headers through Range.
+ */
+export function detectVideoAudioTrackFromUrl(source: string, signal?: AbortSignal) {
+    const normalized = source.trim();
+    if (!normalized || videoAudioProbeCache.has(normalized)) return videoAudioProbeCache.get(normalized) || Promise.resolve(undefined);
+    const probe = probeVideoAudioUrl(normalized, signal)
+        .then((result) => {
+            if (result === undefined) videoAudioProbeCache.delete(normalized);
+            return result;
+        })
+        .catch(() => {
+            videoAudioProbeCache.delete(normalized);
+            return undefined;
+        });
+    videoAudioProbeCache.set(normalized, probe);
+    return probe;
+}
+
+async function probeVideoAudioUrl(source: string, signal?: AbortSignal): Promise<boolean | undefined> {
+    if (!isLikelyIsoBmffVideoUrl(source)) return undefined;
+    const first = await fetchVideoRange(source, 0, MP4_AUDIO_PROBE_RANGE_BYTES - 1, signal);
+    if (!first) return undefined;
+    const firstResult = parseIsoBmffAudioTrack(first.bytes);
+    if (firstResult !== undefined) return firstResult;
+
+    const totalBytes = first.totalBytes;
+    if (totalBytes && totalBytes > MP4_AUDIO_PROBE_RANGE_BYTES) {
+        const tailStart = Math.max(0, totalBytes - MP4_AUDIO_PROBE_RANGE_BYTES);
+        const tail = await fetchVideoRange(source, tailStart, totalBytes - 1, signal);
+        const tailResult = tail ? parseIsoBmffAudioTrack(tail.bytes) : undefined;
+        if (tailResult !== undefined) return tailResult;
+    }
+
+    // Some origins ignore Range and return the complete response. Only accept
+    // a bounded full response so a missing Content-Range cannot trigger a
+    // large duplicate download for an active video.
+    if (first.status === 200 && first.bytes.byteLength <= MAX_MP4_AUDIO_PROBE_BYTES) return parseIsoBmffAudioTrack(first.bytes);
+    return undefined;
+}
+
+async function fetchVideoRange(source: string, start: number, end: number, signal?: AbortSignal) {
+    const response = await fetch(source, { headers: { Range: `bytes=${start}-${end}` }, signal, cache: "force-cache" });
+    if (!response.ok) return undefined;
+    const declaredLength = Number(response.headers.get("content-length"));
+    if (Number.isFinite(declaredLength) && (response.status === 200 && declaredLength > MAX_MP4_AUDIO_PROBE_BYTES || response.status === 206 && declaredLength > MP4_AUDIO_PROBE_RANGE_BYTES)) return undefined;
+    const bytes = new Uint8Array(await response.arrayBuffer());
+    const contentRange = response.headers.get("content-range") || "";
+    const rangeMatch = /bytes\s+\d+-\d+\/(\d+)/i.exec(contentRange);
+    const totalBytes = rangeMatch ? Number(rangeMatch[1]) : Number.isFinite(declaredLength) ? declaredLength : undefined;
+    return { bytes, status: response.status, totalBytes };
+}
+
+function isIsoBmffVideoType(mimeType: string) {
+    const normalized = mimeType.toLowerCase().split(";", 1)[0].trim();
+    return normalized === "video/mp4" || normalized === "video/quicktime" || normalized === "application/mp4";
+}
+
+function isLikelyIsoBmffVideoUrl(source: string) {
+    try {
+        const baseUrl = typeof window === "undefined" ? "http://localhost" : window.location?.href || "http://localhost";
+        const url = new URL(source, baseUrl);
+        return /\.(mp4|m4v|mov)(?:$|[?#])/i.test(url.pathname + url.search);
+    } catch {
+        return false;
+    }
+}
+
+function parseIsoBmffAudioTrack(bytes: Uint8Array): boolean | undefined {
+    const direct = parseIsoBmffAudioTrackFromOffset(bytes, 0);
+    if (direct !== undefined) return direct;
+    // A suffix Range can begin in the middle of an earlier box. Locate a
+    // complete `moov` header inside that suffix before giving up.
+    for (let offset = 0; offset + 8 <= bytes.byteLength; offset += 1) {
+        if (readFourcc(bytes, offset + 4) !== "moov") continue;
+        const result = parseIsoBmffAudioTrackFromOffset(bytes, offset);
+        if (result !== undefined) return result;
+    }
+    return undefined;
+}
+
+function parseIsoBmffAudioTrackFromOffset(bytes: Uint8Array, startOffset: number): boolean | undefined {
+    let foundMoov = false;
+    let foundAudio = false;
+
+    const visit = (start: number, end: number, insideMoov: boolean) => {
+        let offset = start;
+        while (offset + 8 <= end) {
+            const size32 = readUint32(bytes, offset);
+            const type = readFourcc(bytes, offset + 4);
+            let headerSize = 8;
+            let boxEnd: number;
+            if (size32 === 1) {
+                if (offset + 16 > end) return;
+                const high = readUint32(bytes, offset + 8);
+                const low = readUint32(bytes, offset + 12);
+                const size = high * 0x100000000 + low;
+                headerSize = 16;
+                boxEnd = offset + size;
+            } else if (size32 === 0) {
+                boxEnd = end;
+            } else {
+                boxEnd = offset + size32;
+            }
+            // Empty leaf boxes (size == header size) are valid ISO-BMFF boxes
+            // such as `free`; only reject truncated or backwards boxes.
+            if (!type || boxEnd < offset + headerSize || boxEnd > end) return;
+
+            const isMoov = type === "moov";
+            if (isMoov) foundMoov = true;
+            if (insideMoov && type === "hdlr" && offset + 16 <= boxEnd && readFourcc(bytes, offset + 16) === "soun") foundAudio = true;
+
+            if (isMoov || insideMoov && (type === "trak" || type === "mdia")) {
+                visit(offset + headerSize, boxEnd, insideMoov || isMoov);
+            }
+            if (foundAudio) return;
+            offset = boxEnd;
+        }
+    };
+
+    visit(startOffset, bytes.byteLength, false);
+    return foundMoov ? foundAudio : undefined;
+}
+
+function readUint32(bytes: Uint8Array, offset: number) {
+    return ((bytes[offset] || 0) * 0x1000000) + ((bytes[offset + 1] || 0) << 16) + ((bytes[offset + 2] || 0) << 8) + (bytes[offset + 3] || 0);
+}
+
+function readFourcc(bytes: Uint8Array, offset: number) {
+    if (offset + 4 > bytes.byteLength) return "";
+    return String.fromCharCode(bytes[offset], bytes[offset + 1], bytes[offset + 2], bytes[offset + 3]);
+}
+
+function abortError() {
+    return new DOMException("Video poster capture aborted", "AbortError");
+}
diff --git a/web/src/pages/canvas/canvas-project-status-dialogs.tsx b/web/src/pages/canvas/canvas-project-status-dialogs.tsx
index de54b1cbe..367df16f1 100644
--- a/web/src/pages/canvas/canvas-project-status-dialogs.tsx
+++ b/web/src/pages/canvas/canvas-project-status-dialogs.tsx
@@ -83,7 +83,7 @@ export function CanvasProjectStatusDialogs({ theme, task, taskLogs, taskLoading,
                 styles={{ body: { padding: 0, display: "flex", justifyContent: "center", alignItems: "center", maxHeight: "84vh", overflow: "hidden", background: "#090909" } }}
             >
                 {previewNode?.metadata?.content && previewNode.type === CanvasNodeType.Video ? (
-                    <VideoPlayer src={previewNode.metadata.content} mimeType={previewNode.metadata.mimeType} title={previewNode.title || "视频预览"} className="max-h-[84vh] max-w-full bg-black" />
+                    <VideoPlayer src={previewNode.metadata.content} mimeType={previewNode.metadata.mimeType} title={previewNode.title || "视频预览"} hasAudio={typeof previewNode.metadata.hasAudio === "boolean" ? previewNode.metadata.hasAudio : undefined} className="max-h-[84vh] max-w-full bg-black" />
                 ) : null}
             </Modal>
 
diff --git a/web/src/pages/canvas/canvas-project-world-layers.tsx b/web/src/pages/canvas/canvas-project-world-layers.tsx
index 74b3267d3..b9d15e78a 100644
--- a/web/src/pages/canvas/canvas-project-world-layers.tsx
+++ b/web/src/pages/canvas/canvas-project-world-layers.tsx
@@ -5,6 +5,8 @@ import { ConnectionPath } from "@/components/canvas/canvas-connections";
 import { CanvasFrameNode } from "@/components/canvas/canvas-frame-node";
 import { CanvasNode } from "@/components/canvas/canvas-node";
 import type { CanvasBatchConnectionPreview } from "@/lib/canvas/canvas-batch-connection";
+import { resolveActiveCanvasMediaNodeId } from "@/lib/canvas/canvas-performance-mode";
+import { sortCanvasNodesByStackOrder, type CanvasNodeStackOrder } from "@/lib/canvas/canvas-node-stack-order";
 import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
 import { isFrameNode } from "@/lib/canvas/canvas-frame";
 import type { CanvasDisplayConnection, CanvasFolderStyle, CanvasFolderTheme, CanvasNodeData, ConnectionHandle, Position, SelectionBox } from "@/types/canvas";
@@ -25,6 +27,7 @@ type CanvasProjectWorldLayersProps = {
     connectionTargetNodeId: string | null;
     nodeById: Map<string, CanvasNodeData>;
     visibleNodes: CanvasNodeData[];
+    nodeStackOrder: CanvasNodeStackOrder;
     frameChildrenById: Map<string, CanvasNodeData[]>;
     linkedFolderPreviewNodesById: Map<string, CanvasNodeData[]>;
     dragPreview: DragPreview;
@@ -80,6 +83,11 @@ const EMPTY_CANVAS_NODES: CanvasNodeData[] = [];
 
 export const CanvasProjectWorldLayers = memo(function CanvasProjectWorldLayers(props: CanvasProjectWorldLayersProps) {
     const { viewportScale } = props;
+    const activeMediaNodeId = resolveActiveCanvasMediaNodeId(props.selectedNodeIds, props.nodeById);
+    const orderedVisibleNodes = [
+        ...props.visibleNodes.filter(isFrameNode),
+        ...sortCanvasNodesByStackOrder(props.visibleNodes.filter((node) => !isFrameNode(node)), props.nodeStackOrder),
+    ];
     const framePreviewNodes = (node: CanvasNodeData) => {
         const assetFolderId = node.metadata?.folder?.assetFolderId;
         if (assetFolderId) return props.linkedFolderPreviewNodesById.get(assetFolderId) || EMPTY_CANVAS_NODES;
@@ -110,7 +118,7 @@ export const CanvasProjectWorldLayers = memo(function CanvasProjectWorldLayers(p
                 ))}
             </svg>
 
-            {props.visibleNodes.map((node) =>
+            {orderedVisibleNodes.map((node) =>
                 isFrameNode(node) ? (
                     <CanvasFrameNode
                         key={node.id}
@@ -135,6 +143,8 @@ export const CanvasProjectWorldLayers = memo(function CanvasProjectWorldLayers(p
                         dragOffset={props.dragPreview?.nodeIds.has(node.id) ? props.dragPreview : undefined}
                         scale={viewportScale}
                         isSelected={props.selectedNodeIds.has(node.id)}
+                        mediaActive={activeMediaNodeId === node.id}
+                        hydrateMediaPreview={activeMediaNodeId === null}
                         isRelated={props.relatedNodeIds.has(node.id)}
                         isFocusRelated={props.activeNodeId === node.id}
                         isConnectionTarget={props.connectionTargetNodeId === node.id || props.batchConnectionPreview?.targetNodeId === node.id}
diff --git a/web/src/pages/canvas/components/libtv-import-dialog.tsx b/web/src/pages/canvas/components/libtv-import-dialog.tsx
index ad6ecc84d..a2255f0b2 100644
--- a/web/src/pages/canvas/components/libtv-import-dialog.tsx
+++ b/web/src/pages/canvas/components/libtv-import-dialog.tsx
@@ -2,7 +2,7 @@ import { App, Button, Input, Modal, Tag } from "antd";
 import { CircleAlert, ExternalLink, Import, LoaderCircle } from "lucide-react";
 import { useMemo, useState } from "react";
 
-import { buildLibTVImagePreviewUrl, formatLibTVBatchTime, parseLibTVProjectUUID } from "@/lib/canvas/libtv-import";
+import { buildLibTVImagePreviewUrl, buildLibTVVideoPreviewUrl, buildLibTVVideoSourceUrl, formatLibTVBatchTime, parseLibTVProjectUUID } from "@/lib/canvas/libtv-import";
 import { importLibTVCanvas, type LibTVImportResult } from "@/services/api/libtv";
 import { CanvasNodeType, type CanvasConnection, type CanvasNodeData, type ViewportTransform } from "@/types/canvas";
 
@@ -30,8 +30,8 @@ function buildCanvasNodes(result: LibTVImportResult, viewport: ViewportTransform
         width: node.width,
         height: node.height,
         metadata: {
-            content: node.content,
-            previewContent: node.type === "image" ? buildLibTVImagePreviewUrl(node.content) : undefined,
+            content: node.type === "video" ? buildLibTVVideoSourceUrl(node.content) : node.content,
+            previewContent: node.type === "image" ? buildLibTVImagePreviewUrl(node.content) : buildLibTVVideoPreviewUrl(node.content) || undefined,
             prompt: node.prompt,
             model: node.model,
             status: node.status || "idle",
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index 7f1829464..7bc573a7c 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -93,6 +93,7 @@ import { CanvasProjectSelectionToolbar } from "./canvas-project-selection-toolba
 import { CanvasProjectStatusDialogs } from "./canvas-project-status-dialogs";
 import { CanvasProjectWorldLayers } from "./canvas-project-world-layers";
 import { CanvasNodeActionContext } from "@/components/canvas/canvas-node-action-context";
+import { bringCanvasNodeToFront, type CanvasNodeStackOrder } from "@/lib/canvas/canvas-node-stack-order";
 import { PortraitClearanceModal } from "@/components/canvas/portrait-clearance/portrait-clearance-modal";
 import { CanvasNodeGraphContext, type CanvasNodeGraphContextValue } from "@/components/canvas/canvas-node-graph-context";
 import { CanvasRefreshShell } from "./canvas-refresh-shell";
@@ -239,6 +240,10 @@ function InfiniteCanvasPage() {
         nodesRef.current = next;
         setNodesState(next);
     }, []);
+    const [nodeStackOrder, setNodeStackOrder] = useState<CanvasNodeStackOrder>([]);
+    const bringNodeToFront = useCallback((nodeId: string) => {
+        setNodeStackOrder((current) => bringCanvasNodeToFront(current, nodeId));
+    }, []);
     const [connections, setConnections] = useState<CanvasConnection[]>([]);
     const [chatSessions, setChatSessions] = useState<CanvasAssistantSession[]>([]);
     const [activeChatId, setActiveChatId] = useState<string | null>(null);
@@ -323,8 +328,17 @@ function InfiniteCanvasPage() {
 
     useEffect(() => {
         didInitialCenterRef.current = false;
+        setNodeStackOrder([]);
     }, [projectId]);
 
+    useEffect(() => {
+        const nodeIds = new Set(nodes.map((node) => node.id));
+        setNodeStackOrder((current) => {
+            const next = current.filter((nodeId) => nodeIds.has(nodeId));
+            return next.length === current.length ? current : next;
+        });
+    }, [nodes]);
+
     const connectionsRef = useRef(connections);
     const chatSessionsRef = useRef(chatSessions);
     const activeChatIdRef = useRef(activeChatId);
@@ -1002,6 +1016,9 @@ function InfiniteCanvasPage() {
     }, []);
 
     const handleSelectedNodeClick = useCallback((node: CanvasNodeData) => {
+        // Selection is transient, but the LibTV-style paint order survives
+        // deselection so a clicked lower node stays above its neighbours.
+        if (node.type !== CanvasNodeType.Frame) bringNodeToFront(node.id);
         if (node.type === CanvasNodeType.Drawing) {
             setDialogNodeId(null);
             setDrawingNodeId(node.id);
@@ -1020,6 +1037,23 @@ function InfiniteCanvasPage() {
                 return currentNode?.type === CanvasNodeType.Config ? current : node.id;
             });
         }
+    }, [bringNodeToFront, nodesRef]);
+
+    const handleNodeBringToFront = useCallback((nodeId: string) => {
+        const node = nodesRef.current.find((item) => item.id === nodeId);
+        if (node && node.type !== CanvasNodeType.Frame) bringNodeToFront(nodeId);
+    }, [bringNodeToFront, nodesRef]);
+
+    const handleNodeDragEnd = useCallback((nodeId: string) => {
+        const node = nodesRef.current.find((item) => item.id === nodeId);
+        if (!node || node.type === CanvasNodeType.Script || node.type === CanvasNodeType.Drawing || node.type === PORTRAIT_CLEARANCE_NODE_TYPE) {
+            setDialogNodeId(null);
+            return;
+        }
+        // A drag selects a new node even though it is not a click. Keep the
+        // generation editor bound to the node most recently moved so a stale
+        // panel from the previous node cannot reappear after mouse-up.
+        setDialogNodeId(node.id);
     }, [nodesRef]);
 
     const handleCanvasDeselect = useCallback(() => {
@@ -1042,7 +1076,9 @@ function InfiniteCanvasPage() {
         cancelPendingConnectionCreate,
         onCanvasSelectionStart: handleCanvasSelectionStart,
         onNodeInteractionStart: handleNodeInteractionStart,
+        onNodeBringToFront: handleNodeBringToFront,
         onNodeClick: handleSelectedNodeClick,
+        onNodeDragEnd: handleNodeDragEnd,
         onBatchConnectionTarget: handleBatchConnectionTargetClick,
         onLinkedFolderDrop: archiveNodesToLinkedFolder,
         onDeselect: handleCanvasDeselect,
@@ -1279,6 +1315,10 @@ function InfiniteCanvasPage() {
         });
     }, [mentionReferencesByNodeId, setNodes]);
     const dialogNode = dialogNodeId ? nodeById.get(dialogNodeId) || null : null;
+    // dragPreview is published on the same pointer-down frame as isNodeDragging.
+    // Treat either signal as moving so floating editors disappear before the
+    // first preview transform is painted and never affect drag layout.
+    const isCanvasNodeMoving = isNodeDragging || Boolean(dragPreview?.nodeIds.size);
     const subtitleNode = subtitleNodeId ? nodeById.get(subtitleNodeId) || null : null;
     const timelineNode = timelineNodeId ? nodeById.get(timelineNodeId) || null : null;
     const frameNode = frameDialogNodeId ? nodeById.get(frameDialogNodeId) || null : null;
@@ -2177,6 +2217,7 @@ function InfiniteCanvasPage() {
                                     connectionTargetNodeId={connectionTargetNodeId}
                                     nodeById={nodeById}
                                     visibleNodes={visibleNodes}
+                                    nodeStackOrder={nodeStackOrder}
                                     frameChildrenById={frameChildrenById}
                                     linkedFolderPreviewNodesById={linkedFolderPreviewNodesById}
                                     dragPreview={dragPreview}
@@ -2332,7 +2373,7 @@ function InfiniteCanvasPage() {
                         ) : null}
                     </div>
 
-                    {angleNode?.metadata?.content ? (
+                    {angleNode?.metadata?.content && !isCanvasNodeMoving ? (
                         <CanvasNodePanelOverlay
                             node={angleNode}
                             viewport={viewport}
@@ -2352,7 +2393,7 @@ function InfiniteCanvasPage() {
                         </CanvasNodePanelOverlay>
                     ) : null}
 
-                    {emotionNode?.metadata?.content ? (
+                    {emotionNode?.metadata?.content && !isCanvasNodeMoving ? (
                         <CanvasEmotionWorkspace
                             node={emotionNode}
                             viewport={viewport}
@@ -2366,7 +2407,7 @@ function InfiniteCanvasPage() {
                         />
                     ) : null}
 
-                    {dialogNode && dialogNode.type !== CanvasNodeType.Script && dialogNode.type !== CanvasNodeType.Drawing && !selectionBox ? (
+                    {dialogNode && dialogNode.type !== CanvasNodeType.Script && dialogNode.type !== CanvasNodeType.Drawing && !selectionBox && !isCanvasNodeMoving ? (
                         <CanvasNodePanelOverlay
                             node={dialogNode}
                             viewport={viewport}
@@ -2391,7 +2432,7 @@ function InfiniteCanvasPage() {
                         />
                     ) : null}
 
-                    {selectedNodeBounds && !selectionBox && !isNodeDragging ? (
+                    {selectedNodeBounds && !selectionBox && !isCanvasNodeMoving ? (
                         <CanvasProjectSelectionToolbar
                             anchorRef={selectionBoundsElementRef}
                             containerRef={containerRef}
@@ -2422,7 +2463,7 @@ function InfiniteCanvasPage() {
                     ) : null}
 
                     <CanvasNodeToolbar
-                        node={isNodeDragging || nodeImageSettingsOpen || emotionNodeId ? null : toolbarNode}
+                        node={isCanvasNodeMoving || nodeImageSettingsOpen || emotionNodeId ? null : toolbarNode}
                         workspaceMode={workspaceMode}
                         viewport={viewport}
                         containerRef={containerRef}
diff --git a/web/src/pages/canvas/use-canvas-connection-controller.ts b/web/src/pages/canvas/use-canvas-connection-controller.ts
index 44a94f20e..e24bed441 100644
--- a/web/src/pages/canvas/use-canvas-connection-controller.ts
+++ b/web/src/pages/canvas/use-canvas-connection-controller.ts
@@ -44,8 +44,10 @@ type ConnectionDropTarget = {
 
 type BatchConnectionDropTarget = ConnectionDropTarget;
 
-const CONNECTION_HANDLE_HIT_RADIUS = 40;
-const CONNECTION_NODE_HIT_PADDING = 32;
+// LibTV's 80px world-space quick-add zone renders at roughly 110px on the
+// reference canvas. Use the same generous 112px screen-space diameter here,
+// while retaining a circular boundary around the corresponding side anchor.
+const CONNECTION_SNAP_RADIUS = 56;
 const NODE_STATUS_IDLE = "idle" as const;
 
 function selectRunningHubWorkflow(config: AiConfig) {
@@ -95,6 +97,8 @@ export function useCanvasConnectionController({
     const batchConnectionPreviewRef = useRef<CanvasBatchConnectionPreview | null>(null);
     const batchConnectionPointerIdRef = useRef<number | null>(null);
     const batchConnectionPointerStartRef = useRef<Position | null>(null);
+    const pointerMoveFrameRef = useRef<number | null>(null);
+    const latestPointerMoveRef = useRef<PointerEvent | null>(null);
 
     useLayoutEffect(() => {
         connectingParamsRef.current = connectingParams;
@@ -196,6 +200,8 @@ export function useCanvasConnectionController({
         const nodeType = type;
         if (nodeType === CanvasNodeType.Drawing && !isDrawingEngineAvailable(defaultDrawingEngine, tldrawLicenseKey)) {
             message.error("当前生产构建未配置 tldraw License Key，不能创建 tldraw 绘图");
+            closeConnectionCreateMenu();
+            setConnecting(null);
             return;
         }
         const batchSourceNodeIds = pending.batchSourceNodeIds?.length ? Array.from(new Set(pending.batchSourceNodeIds)) : [];
@@ -219,6 +225,7 @@ export function useCanvasConnectionController({
         if (selectedWorkflowProvider && !workflowProviderPluginEnabled(runtimeStatuses, selectedWorkflowProvider)) {
             message.error(`${selectedWorkflowProvider === "runninghub" ? "RunningHub" : "ComfyUI"} 工作流插件未启用`);
             closeConnectionCreateMenu();
+            setConnecting(null);
             return;
         }
         const runningHubWorkflow = selectedWorkflowProvider === "runninghub" ? selectRunningHubWorkflow(config) : undefined;
@@ -265,6 +272,7 @@ export function useCanvasConnectionController({
         if (batchSourceNodeIds.length && nodeType === CanvasNodeType.Drawing) {
             message.error("批量连接暂不支持创建绘图，请先连接到普通节点");
             closeConnectionCreateMenu();
+            setConnecting(null);
             return;
         }
         const batchPlan = batchSourceNodeIds.length
@@ -299,11 +307,15 @@ export function useCanvasConnectionController({
         const connection = normalizeConnection(pending.connection.nodeId, newNode.id, [...nodesRef.current, newNode], pending.connection.handleType);
         if (!connection) {
             message.warning("当前节点不能建立这条连线");
+            closeConnectionCreateMenu();
+            setConnecting(null);
             return;
         }
         const policyError = canvasConnectionError(config, [...nodesRef.current, newNode], connectionsRef.current, connection);
         if (policyError) {
             message.warning(policyError);
+            closeConnectionCreateMenu();
+            setConnecting(null);
             return;
         }
         if (nodeType === CanvasNodeType.Drawing) {
@@ -311,6 +323,8 @@ export function useCanvasConnectionController({
             const sourceUrl = drawingSourceNode?.type === CanvasNodeType.Image ? drawingSourceNode.metadata?.content : "";
             if (pending.connection.handleType !== "source" || !drawingSourceNode || !sourceUrl || !newNode.metadata?.drawingId) {
                 message.error("只有已有图片内容的输出连线可以创建绘图");
+                closeConnectionCreateMenu();
+                setConnecting(null);
                 return;
             }
             closeConnectionCreateMenu();
@@ -373,8 +387,7 @@ export function useCanvasConnectionController({
     const getConnectionDropTarget = useCallback((clientX: number, clientY: number, current: ConnectionHandle): ConnectionDropTarget => {
         const world = screenToCanvas(clientX, clientY);
         const scale = Math.max(viewportRef.current.k, 0.05);
-        const padding = CONNECTION_NODE_HIT_PADDING / scale;
-        const handleRadius = CONNECTION_HANDLE_HIT_RADIUS / scale;
+        const handleRadius = CONNECTION_SNAP_RADIUS / scale;
         let isNearNode = false;
         let bestNodeId: string | null = null;
         let bestHandleId: string | undefined;
@@ -388,23 +401,25 @@ export function useCanvasConnectionController({
                 const scrollTop = scriptScrollTopById[node.id] || 0;
                 const targetHandleId = node.type === CanvasNodeType.Script ? storyboardHandleAtY(node, world.y, scrollTop) : undefined;
                 if (node.type === CanvasNodeType.Script && !targetHandleId) return;
-                const targetAnchorRatio = node.type === CanvasNodeType.Script ? undefined : Math.min(0.94, Math.max(0.06, (world.y - node.position.y) / Math.max(node.height, 1)));
+                // Ordinary nodes expose one centered input/output port. Only
+                // storyboard rows have a meaningful vertical target position.
+                const targetAnchorRatio = undefined;
                 const anchor = getConnectionTargetAnchor(node, current, targetHandleId, scrollTop);
                 const dx = world.x - anchor.x;
                 const dy = world.y - anchor.y;
-                const hitsHandle = dx * dx + dy * dy <= handleRadius * handleRadius;
-                const hitsInside = world.x >= node.position.x && world.x <= node.position.x + node.width && world.y >= node.position.y && world.y <= node.position.y + node.height;
-                const hitsExpanded = world.x >= node.position.x - padding && world.x <= node.position.x + node.width + padding && world.y >= node.position.y - padding && world.y <= node.position.y + node.height + padding;
-                if (!hitsHandle && !hitsInside && !hitsExpanded) return;
+                // Do not treat the node body or a rectangular padding band as a
+                // connection target. LibTV snaps only inside the circular
+                // quick-add area centred on the corresponding side handle.
+                const hitsSnapZone = dx * dx + dy * dy <= handleRadius * handleRadius;
+                if (!hitsSnapZone) return;
                 isNearNode = true;
                 const normalized = node.id === current.nodeId ? null : normalizeConnection(current.nodeId, node.id, nodesRef.current, current.handleType);
                 if (!normalized || canvasConnectionError(config, nodesRef.current, connectionsRef.current, normalized)) return;
-                const priority = hitsInside ? 0 : hitsHandle ? 1 : 2;
-                if (priority < bestPriority) {
+                if (1 < bestPriority) {
                     bestNodeId = node.id;
                     bestHandleId = targetHandleId;
                     bestAnchorRatio = targetAnchorRatio;
-                    bestPriority = priority;
+                    bestPriority = 1;
                 }
             });
         return { nodeId: bestNodeId, handleId: bestHandleId, anchorRatio: bestAnchorRatio, isNearNode };
@@ -418,8 +433,7 @@ export function useCanvasConnectionController({
 
         const world = screenToCanvas(clientX, clientY);
         const scale = Math.max(viewportRef.current.k, 0.05);
-        const padding = CONNECTION_NODE_HIT_PADDING / scale;
-        const handleRadius = CONNECTION_HANDLE_HIT_RADIUS / scale;
+        const handleRadius = CONNECTION_SNAP_RADIUS / scale;
         let isNearNode = false;
         let bestNodeId: string | null = null;
         let bestHandleId: string | undefined;
@@ -434,22 +448,19 @@ export function useCanvasConnectionController({
                 const scrollTop = scriptScrollTopById[node.id] || 0;
                 const targetHandleId = node.type === CanvasNodeType.Script ? storyboardHandleAtY(node, world.y, scrollTop) : undefined;
                 if (node.type === CanvasNodeType.Script && !targetHandleId) return;
-                const targetAnchorRatio = node.type === CanvasNodeType.Script ? undefined : Math.min(0.94, Math.max(0.06, (world.y - node.position.y) / Math.max(node.height, 1)));
+                const targetAnchorRatio = undefined;
                 const anchor = getConnectionTargetAnchor(node, current, targetHandleId, scrollTop);
                 const dx = world.x - anchor.x;
                 const dy = world.y - anchor.y;
-                const hitsHandle = dx * dx + dy * dy <= handleRadius * handleRadius;
-                const hitsInside = world.x >= node.position.x && world.x <= node.position.x + node.width && world.y >= node.position.y && world.y <= node.position.y + node.height;
-                const hitsExpanded = world.x >= node.position.x - padding && world.x <= node.position.x + node.width + padding && world.y >= node.position.y - padding && world.y <= node.position.y + node.height + padding;
-                if (!hitsHandle && !hitsInside && !hitsExpanded) return;
+                const hitsSnapZone = dx * dx + dy * dy <= handleRadius * handleRadius;
+                if (!hitsSnapZone) return;
                 isNearNode = true;
                 if (!hasBatchConnectionCandidate(sourceNodeIds, node.id, nodesRef.current)) return;
-                const priority = hitsInside ? 0 : hitsHandle ? 1 : 2;
-                if (priority < bestPriority) {
+                if (1 < bestPriority) {
                     bestNodeId = node.id;
                     bestHandleId = targetHandleId;
                     bestAnchorRatio = targetAnchorRatio;
-                    bestPriority = priority;
+                    bestPriority = 1;
                 }
             });
         return { nodeId: bestNodeId, handleId: bestHandleId, anchorRatio: bestAnchorRatio, isNearNode };
@@ -544,6 +555,11 @@ export function useCanvasConnectionController({
     const handleConnectStart = useCallback((event: ReactPointerEvent, nodeId: string, handleType: "source" | "target", handleId?: string, anchorRatio?: number) => {
         event.preventDefault();
         event.stopPropagation();
+        // A new pin interaction always starts a fresh session. Without this
+        // reset, an old quick-create menu can coexist with the new draft line;
+        // pointerup then sees the stale pending menu and silently aborts.
+        if (pendingConnectionCreateRef.current) closeConnectionCreateMenu();
+        if (connectingParamsRef.current) setConnecting(null);
         if (batchConnectionPreviewRef.current && handleType === "target") {
             commitBatchConnection(batchConnectionPreviewRef.current.sourceNodeIds, nodeId, handleId, anchorRatio);
             clearBatchConnection();
@@ -557,10 +573,19 @@ export function useCanvasConnectionController({
         setConnectionTargetNodeId(null);
         setConnectionTargetAnchorRatio(undefined);
         setSelectedConnectionId(null);
-    }, [clearBatchConnection, commitBatchConnection, screenToCanvas, setConnecting, setSelectedConnectionId]);
+    }, [clearBatchConnection, closeConnectionCreateMenu, commitBatchConnection, screenToCanvas, setConnecting, setSelectedConnectionId]);
 
     useEffect(() => {
-        const handlePointerMove = (event: PointerEvent) => {
+        const cancelPendingPointerMove = () => {
+            latestPointerMoveRef.current = null;
+            if (pointerMoveFrameRef.current !== null) window.cancelAnimationFrame(pointerMoveFrameRef.current);
+            pointerMoveFrameRef.current = null;
+        };
+        const flushPointerMove = () => {
+            pointerMoveFrameRef.current = null;
+            const event = latestPointerMoveRef.current;
+            latestPointerMoveRef.current = null;
+            if (!event) return;
             const batch = batchConnectionPreviewRef.current;
             if (batch && (batchConnectionPointerIdRef.current === null || batchConnectionPointerIdRef.current === event.pointerId)) {
                 const target = getBatchConnectionDropTarget(event.clientX, event.clientY, batch.sourceNodeIds);
@@ -575,7 +600,19 @@ export function useCanvasConnectionController({
             setConnectionTargetAnchorRatio(dropTarget.anchorRatio);
             setMouseWorld(screenToCanvas(event.clientX, event.clientY));
         };
+        const handlePointerMove = (event: PointerEvent) => {
+            // Pointer events can arrive faster than the canvas can paint. Keep
+            // only the latest position and update the preview once per frame,
+            // which prevents redundant React/Leafer work and visible jitter.
+            latestPointerMoveRef.current = event;
+            if (pointerMoveFrameRef.current === null) pointerMoveFrameRef.current = window.requestAnimationFrame(flushPointerMove);
+        };
         const handlePointerUp = (event: PointerEvent) => {
+            latestPointerMoveRef.current = null;
+            if (pointerMoveFrameRef.current !== null) {
+                window.cancelAnimationFrame(pointerMoveFrameRef.current);
+                pointerMoveFrameRef.current = null;
+            }
             if (batchConnectionPointerIdRef.current === event.pointerId) {
                 const start = batchConnectionPointerStartRef.current;
                 const batch = batchConnectionPreviewRef.current;
@@ -611,6 +648,7 @@ export function useCanvasConnectionController({
             finishConnection(event.clientX, event.clientY);
         };
         const handlePointerCancel = (event: PointerEvent) => {
+            cancelPendingPointerMove();
             if (batchConnectionPointerIdRef.current === event.pointerId) {
                 clearBatchConnection();
                 return;
@@ -618,6 +656,7 @@ export function useCanvasConnectionController({
             if (connectingPointerIdRef.current === event.pointerId) setConnecting(null);
         };
         const cancel = () => {
+            cancelPendingPointerMove();
             if (connectingParamsRef.current) setConnecting(null);
             if (batchConnectionPreviewRef.current) clearBatchConnection();
         };
@@ -626,6 +665,7 @@ export function useCanvasConnectionController({
         window.addEventListener("pointercancel", handlePointerCancel);
         window.addEventListener("blur", cancel);
         return () => {
+            cancelPendingPointerMove();
             window.removeEventListener("pointermove", handlePointerMove);
             window.removeEventListener("pointerup", handlePointerUp);
             window.removeEventListener("pointercancel", handlePointerCancel);
diff --git a/web/src/pages/canvas/use-canvas-project-lifecycle.ts b/web/src/pages/canvas/use-canvas-project-lifecycle.ts
index fb2a661ec..046559e30 100644
--- a/web/src/pages/canvas/use-canvas-project-lifecycle.ts
+++ b/web/src/pages/canvas/use-canvas-project-lifecycle.ts
@@ -252,7 +252,7 @@ export function useCanvasProjectLifecycle({
     };
 }
 
-const hydratedMediaMetadataKeys = ["content", "storageKey", "naturalWidth", "naturalHeight", "bytes", "mimeType", "durationMs"] as const satisfies readonly (keyof CanvasNodeMetadata)[];
+const hydratedMediaMetadataKeys = ["content", "storageKey", "naturalWidth", "naturalHeight", "bytes", "mimeType", "durationMs", "hasAudio", "videoPreview"] as const satisfies readonly (keyof CanvasNodeMetadata)[];
 
 function mergeHydratedNodeMedia(currentNodes: CanvasNodeData[], initialNodes: CanvasNodeData[], hydratedNodes: CanvasNodeData[]) {
     const initialById = new Map(initialNodes.map((node) => [node.id, node]));
diff --git a/web/src/pages/canvas/use-canvas-render-model.ts b/web/src/pages/canvas/use-canvas-render-model.ts
index eed1a632d..1d8bcadd3 100644
--- a/web/src/pages/canvas/use-canvas-render-model.ts
+++ b/web/src/pages/canvas/use-canvas-render-model.ts
@@ -150,7 +150,9 @@ export function useCanvasRenderModel({
     const emotionNode = emotionNodeId ? nodeById.get(emotionNodeId) || null : null;
     const previewNode = previewNodeId ? nodeById.get(previewNodeId) || null : null;
     const contextMenuNode = contextMenu?.type === "node" ? nodeById.get(contextMenu.nodeId) || null : null;
-    const activeNodeId = selectedNodeIds.size > 1 ? null : hoveredNodeId || (selectedNodeIds.size === 1 ? Array.from(selectedNodeIds)[0] : null);
+    // Hover only drives transient affordances (toolbar/handles). Selection is
+    // the explicit focus action that raises a node and highlights its graph.
+    const activeNodeId = selectedNodeIds.size === 1 ? Array.from(selectedNodeIds)[0] : null;
 
     const selectedNodeBounds = useMemo(() => {
         if (selectedNodeIds.size < 2) return null;
diff --git a/web/src/pages/canvas/use-canvas-selection-controller.ts b/web/src/pages/canvas/use-canvas-selection-controller.ts
index 0e8aa0531..c073d2d96 100644
--- a/web/src/pages/canvas/use-canvas-selection-controller.ts
+++ b/web/src/pages/canvas/use-canvas-selection-controller.ts
@@ -18,7 +18,9 @@ type UseCanvasSelectionControllerOptions = {
     cancelPendingConnectionCreate: () => void;
     onCanvasSelectionStart: () => void;
     onNodeInteractionStart: (selectionModifier: boolean) => void;
+    onNodeBringToFront?: (nodeId: string) => void;
     onNodeClick: (node: CanvasNodeData) => void;
+    onNodeDragEnd?: (nodeId: string) => void;
     onBatchConnectionTarget?: (event: ReactMouseEvent | ReactPointerEvent, nodeId: string) => boolean;
     onLinkedFolderDrop?: (folder: CanvasNodeData, nodes: CanvasNodeData[]) => void;
     onDeselect: () => void;
@@ -58,7 +60,9 @@ export function useCanvasSelectionController({
     cancelPendingConnectionCreate,
     onCanvasSelectionStart,
     onNodeInteractionStart,
+    onNodeBringToFront,
     onNodeClick,
+    onNodeDragEnd,
     onBatchConnectionTarget,
     onLinkedFolderDrop,
     onDeselect,
@@ -131,6 +135,9 @@ export function useCanvasSelectionController({
         event.stopPropagation();
         if (event.button !== 0) return;
         if (onBatchConnectionTarget?.(event, nodeId)) return;
+        // Paint order is session-local UI state. Update it once at the start
+        // of a real node interaction so dragging also survives deselection.
+        onNodeBringToFront?.(nodeId);
         setSelectedConnectionId(null);
         const currentNodes = nodesRef.current;
         const nextSelected = new Set(selectedNodeIdsRef.current);
@@ -183,7 +190,7 @@ export function useCanvasSelectionController({
         setIsNodeDragging(true);
         setAlignmentGuides({});
         setDragPreview({ x: 0, y: 0, nodeIds: new Set(initialSelectedNodes.map((item) => item.id)) });
-    }, [historyPausedRef, nodesRef, onBatchConnectionTarget, onNodeClick, onNodeInteractionStart, selectedNodeIdsRef, setSelectedConnectionId, setSelectedNodeIds]);
+    }, [historyPausedRef, nodesRef, onBatchConnectionTarget, onNodeBringToFront, onNodeClick, onNodeInteractionStart, selectedNodeIdsRef, setSelectedConnectionId, setSelectedNodeIds]);
 
     const finishNodeDrag = useCallback((clientX?: number, clientY?: number) => {
         if (dragFrameRef.current) {
@@ -217,6 +224,7 @@ export function useCanvasSelectionController({
             // 素材库文件夹只建立归档关系，不把画布节点变成其本地子节点。
             setNodes(linkedFolder ? positioned : applyFrameDrop(positioned, draggedNodeIds, targetId));
             if (linkedFolder) onLinkedFolderDrop?.(linkedFolder, positioned.filter((node) => draggedNodeIds.has(node.id)));
+            if (clickedNodeId) onNodeDragEnd?.(clickedNodeId);
         }
         setFrameDropTargetId(null);
         alignmentContextRef.current = null;
@@ -225,7 +233,7 @@ export function useCanvasSelectionController({
             const clickedNode = nodesRef.current.find((node) => node.id === clickedNodeId);
             if (clickedNode) onNodeClick(clickedNode);
         }
-    }, [historyPausedRef, nodesRef, onLinkedFolderDrop, onNodeClick, setNodes, viewportRef]);
+    }, [historyPausedRef, nodesRef, onLinkedFolderDrop, onNodeClick, onNodeDragEnd, setNodes, viewportRef]);
 
     const handleNodeDragMove = useCallback((event: MouseEvent | PointerEvent) => {
         if (!dragRef.current.isDraggingNode) return;
diff --git a/web/src/pages/canvas/use-canvas-upload.ts b/web/src/pages/canvas/use-canvas-upload.ts
index 46032ffd5..d3e73e3b8 100644
--- a/web/src/pages/canvas/use-canvas-upload.ts
+++ b/web/src/pages/canvas/use-canvas-upload.ts
@@ -709,7 +709,7 @@ export function useCanvasUpload({
             const spec = NODE_DEFAULT_SIZE[CanvasNodeType.Video];
             const size = fitNodeSize(payload.width || spec.width, payload.height || spec.height, VIDEO_NODE_MAX_SIZE.width, VIDEO_NODE_MAX_SIZE.height);
             const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-            return { id, type: CanvasNodeType.Video, title: payload.title, position: { x: center.x - size.width / 2, y: center.y - size.height / 2 }, width: size.width, height: size.height, metadata: { content: payload.url, storageKey: payload.storageKey, status: NODE_STATUS_SUCCESS, naturalWidth: payload.width, naturalHeight: payload.height, durationMs: payload.durationMs, bytes: payload.bytes, mimeType: payload.mimeType || "video/mp4", assetId: payload.assetId } } satisfies CanvasNodeData;
+            return { id, type: CanvasNodeType.Video, title: payload.title, position: { x: center.x - size.width / 2, y: center.y - size.height / 2 }, width: size.width, height: size.height, metadata: { content: payload.url, storageKey: payload.storageKey, status: NODE_STATUS_SUCCESS, naturalWidth: payload.width, naturalHeight: payload.height, durationMs: payload.durationMs, hasAudio: payload.hasAudio, bytes: payload.bytes, mimeType: payload.mimeType || "video/mp4", assetId: payload.assetId } } satisfies CanvasNodeData;
         }
         const storedImage = payload.url
             ? { url: payload.url, storageKey: undefined, width: payload.width || 1, height: payload.height || 1, bytes: payload.bytes || 0, mimeType: payload.mimeType || "image/png" }
diff --git a/web/src/pages/create/creation-assets.ts b/web/src/pages/create/creation-assets.ts
index 59193c012..eae9a4914 100644
--- a/web/src/pages/create/creation-assets.ts
+++ b/web/src/pages/create/creation-assets.ts
@@ -1,5 +1,6 @@
 import type { UploadedFile } from "@/services/file-storage";
 import type { UploadedImage } from "@/services/image-storage";
+import { canvasVideoAssetPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import type { ExternalAssetPickerReference } from "@/lib/plugins/plugin-types";
 import type { Asset, AudioAsset, ImageAsset, NewAsset } from "@/stores/use-asset-store";
 import type { ReferenceImage } from "@/types/image";
@@ -279,7 +280,7 @@ export function creationVideoAsset({ title, uploaded, metadata }: { title: strin
     return {
         kind: "video",
         title: title.trim() || "创作视频",
-        coverUrl: uploaded.url,
+        coverUrl: canvasVideoAssetPreviewUrl(uploaded.url, uploaded.preview?.url),
         tags: ["创作"],
         status: "confirmed",
         source: "创作页",
diff --git a/web/src/services/canvas-audio-playback.ts b/web/src/services/canvas-audio-playback.ts
new file mode 100644
index 000000000..ad0b33d27
--- /dev/null
+++ b/web/src/services/canvas-audio-playback.ts
@@ -0,0 +1,281 @@
+import { cacheResourceObjectUrl } from "@/services/resource-blob-cache";
+import { resourceIdFromStorageKey } from "@/services/api/resources";
+
+export type CanvasAudioSource = {
+    nodeId: string;
+    content: string;
+    storageKey?: string;
+    mimeType?: string;
+    durationMs?: number;
+};
+
+export type CanvasAudioPlaybackPhase = "idle" | "loading" | "playing" | "paused" | "ended" | "error";
+
+export type CanvasAudioPlaybackSnapshot = {
+    nodeId: string | null;
+    phase: CanvasAudioPlaybackPhase;
+    currentTimeMs: number;
+    durationMs: number;
+    error?: string;
+};
+
+type Listener = () => void;
+
+const EMPTY_SNAPSHOT = (nodeId: string): CanvasAudioPlaybackSnapshot => ({
+    nodeId,
+    phase: "idle",
+    currentTimeMs: 0,
+    durationMs: 0,
+});
+
+class CanvasAudioPlaybackController {
+    private audio: HTMLAudioElement | null = null;
+    private activeSource: CanvasAudioSource | null = null;
+    private generation = 0;
+    private pendingSeekMs: number | null = null;
+    private autoplayToken: number | null = null;
+    private readonly snapshots = new Map<string, CanvasAudioPlaybackSnapshot>();
+    private readonly listeners = new Map<string, Set<Listener>>();
+
+    getSnapshot(nodeId: string) {
+        const existing = this.snapshots.get(nodeId);
+        if (existing) return existing;
+        const snapshot = EMPTY_SNAPSHOT(nodeId);
+        this.snapshots.set(nodeId, snapshot);
+        return snapshot;
+    }
+
+    subscribeNode(nodeId: string, listener: Listener) {
+        const nodeListeners = this.listeners.get(nodeId) || new Set<Listener>();
+        nodeListeners.add(listener);
+        this.listeners.set(nodeId, nodeListeners);
+        return () => {
+            nodeListeners.delete(listener);
+            if (!nodeListeners.size) this.listeners.delete(nodeId);
+        };
+    }
+
+    async toggle(source: CanvasAudioSource) {
+        const active = this.activeSource;
+        const snapshot = this.getSnapshot(source.nodeId);
+        if (active && active.nodeId === source.nodeId && sameSource(active, source)) {
+            if (snapshot.phase === "playing") {
+                this.audio?.pause();
+                return;
+            }
+            if (snapshot.phase === "loading") {
+                if (this.autoplayToken === null) {
+                    this.autoplayToken = this.generation;
+                    await this.playActive(source.nodeId);
+                } else {
+                    this.stop(source.nodeId);
+                }
+                return;
+            }
+            if (snapshot.phase === "paused" && this.audio?.src) {
+                await this.resume(source.nodeId);
+                return;
+            }
+        }
+
+        if (this.activeSource) this.stop(this.activeSource.nodeId);
+        return this.begin(source);
+    }
+
+    pause(nodeId?: string) {
+        if (!this.activeSource || (nodeId && this.activeSource.nodeId !== nodeId)) return;
+        this.audio?.pause();
+    }
+
+    stop(nodeId?: string) {
+        if (!this.activeSource || (nodeId && this.activeSource.nodeId !== nodeId)) return;
+        const previous = this.activeSource;
+        this.generation += 1;
+        this.activeSource = null;
+        this.pendingSeekMs = null;
+        this.autoplayToken = null;
+        if (this.audio) {
+            this.audio.pause();
+            this.audio.removeAttribute("src");
+            this.audio.load();
+        }
+        const previousSnapshot = this.getSnapshot(previous.nodeId);
+        this.update(previous.nodeId, {
+            phase: "idle",
+            currentTimeMs: 0,
+            durationMs: previousSnapshot.durationMs || previous.durationMs || 0,
+            error: undefined,
+        });
+    }
+
+    async seek(nodeId: string, timeMs: number, source?: CanvasAudioSource) {
+        if (!this.activeSource || this.activeSource.nodeId !== nodeId) {
+            if (source) {
+                // A seek on another node changes the single shared audio instance.
+                // Reset the previous node first so its control does not remain in
+                // the playing state after ownership moves to the target node.
+                if (this.activeSource) this.stop(this.activeSource.nodeId);
+                await this.begin(source, false, timeMs);
+            }
+            return;
+        }
+        const durationMs = Number.isFinite(this.audio?.duration) && (this.audio?.duration || 0) > 0 ? (this.audio?.duration || 0) * 1000 : this.getSnapshot(nodeId).durationMs;
+        const nextTimeMs = Math.max(0, Math.min(Math.max(0, durationMs), Number.isFinite(timeMs) ? timeMs : 0));
+        if (!this.audio?.src || this.getSnapshot(nodeId).phase === "loading") {
+            this.pendingSeekMs = nextTimeMs;
+            this.update(nodeId, { currentTimeMs: nextTimeMs });
+            return;
+        }
+        try {
+            this.audio.currentTime = nextTimeMs / 1000;
+        } catch {
+            return;
+        }
+        const wasEnded = this.getSnapshot(nodeId).phase === "ended";
+        this.update(nodeId, wasEnded ? { currentTimeMs: nextTimeMs, phase: "paused" } : { currentTimeMs: nextTimeMs });
+    }
+
+    private async begin(source: CanvasAudioSource, autoplay = true, seekTimeMs?: number) {
+        const token = ++this.generation;
+        this.activeSource = source;
+        this.pendingSeekMs = seekTimeMs == null ? null : Math.max(0, seekTimeMs);
+        this.autoplayToken = autoplay ? token : null;
+        this.update(source.nodeId, {
+            phase: "loading",
+            currentTimeMs: this.pendingSeekMs || 0,
+            durationMs: source.durationMs || 0,
+            error: undefined,
+        });
+
+        const url = await resolveAudioSource(source);
+        if (!this.isCurrent(source, token)) return;
+        if (!url) {
+            this.update(source.nodeId, { phase: "error", error: "音频资源不可用" });
+            return;
+        }
+
+        const audio = this.ensureAudio();
+        audio.preload = "metadata";
+        audio.src = url;
+        audio.load();
+        if (!autoplay && this.autoplayToken !== token) return;
+        return this.playActive(source.nodeId, token);
+    }
+
+    private async playActive(nodeId: string, token = this.generation) {
+        if (!this.audio || !this.activeSource || this.activeSource.nodeId !== nodeId || token !== this.generation) return;
+        try {
+            await this.audio.play();
+            if (this.activeSource?.nodeId === nodeId && token === this.generation) this.update(nodeId, { phase: "playing", error: undefined });
+        } catch (error) {
+            if (this.activeSource?.nodeId === nodeId && token === this.generation) this.update(nodeId, { phase: "error", error: mediaErrorMessage(error) });
+        }
+    }
+
+    private async resume(nodeId: string) {
+        if (!this.audio || !this.activeSource || this.activeSource.nodeId !== nodeId) return;
+        try {
+            await this.audio.play();
+            if (this.activeSource?.nodeId === nodeId) this.update(nodeId, { phase: "playing", error: undefined });
+        } catch (error) {
+            this.update(nodeId, { phase: "error", error: mediaErrorMessage(error) });
+        }
+    }
+
+    private ensureAudio() {
+        if (this.audio) return this.audio;
+        if (typeof Audio === "undefined") throw new Error("当前环境不支持音频播放");
+        const audio = new Audio();
+        audio.preload = "metadata";
+        audio.addEventListener("loadedmetadata", () => {
+            const active = this.activeSource;
+            if (!active) return;
+            const durationMs = Number.isFinite(audio.duration) && audio.duration > 0 ? Math.round(audio.duration * 1000) : active.durationMs || 0;
+            const pendingSeekMs = this.pendingSeekMs;
+            this.pendingSeekMs = null;
+            if (pendingSeekMs != null) {
+                const nextTimeMs = Math.max(0, Math.min(Math.max(0, durationMs), pendingSeekMs));
+                try {
+                    audio.currentTime = nextTimeMs / 1000;
+                } catch {
+                    // Some browsers defer currentTime assignment until metadata is ready.
+                }
+                this.update(active.nodeId, this.autoplayToken === null ? { currentTimeMs: nextTimeMs, durationMs, phase: "paused" } : { currentTimeMs: nextTimeMs, durationMs });
+                return;
+            }
+            this.update(active.nodeId, { durationMs });
+        });
+        audio.addEventListener("durationchange", () => {
+            const active = this.activeSource;
+            if (!active || !Number.isFinite(audio.duration) || audio.duration <= 0) return;
+            this.update(active.nodeId, { durationMs: Math.round(audio.duration * 1000) });
+        });
+        audio.addEventListener("timeupdate", () => {
+            const active = this.activeSource;
+            if (!active) return;
+            this.update(active.nodeId, { currentTimeMs: Math.round(Math.max(0, audio.currentTime) * 1000) });
+        });
+        audio.addEventListener("playing", () => {
+            const active = this.activeSource;
+            if (active) this.update(active.nodeId, { phase: "playing", error: undefined });
+        });
+        audio.addEventListener("pause", () => {
+            const active = this.activeSource;
+            if (active && this.getSnapshot(active.nodeId).phase !== "ended") this.update(active.nodeId, { phase: "paused" });
+        });
+        audio.addEventListener("ended", () => {
+            const active = this.activeSource;
+            if (!active) return;
+            const durationMs = Number.isFinite(audio.duration) && audio.duration > 0 ? Math.round(audio.duration * 1000) : this.getSnapshot(active.nodeId).durationMs;
+            this.update(active.nodeId, { phase: "ended", currentTimeMs: durationMs, durationMs });
+        });
+        audio.addEventListener("error", () => {
+            const active = this.activeSource;
+            if (active) this.update(active.nodeId, { phase: "error", error: "音频加载失败" });
+        });
+        this.audio = audio;
+        return audio;
+    }
+
+    private isCurrent(source: CanvasAudioSource, token: number) {
+        return token === this.generation && this.activeSource?.nodeId === source.nodeId && sameSource(this.activeSource, source);
+    }
+
+    private update(nodeId: string, patch: Partial<CanvasAudioPlaybackSnapshot>) {
+        const previous = this.getSnapshot(nodeId);
+        const next: CanvasAudioPlaybackSnapshot = { ...previous, ...patch, nodeId };
+        if (snapshotEqual(previous, next)) return;
+        this.snapshots.set(nodeId, next);
+        this.listeners.get(nodeId)?.forEach((listener) => listener());
+    }
+}
+
+function sameSource(left: CanvasAudioSource, right: CanvasAudioSource) {
+    return left.content === right.content && left.storageKey === right.storageKey && left.mimeType === right.mimeType;
+}
+
+async function resolveAudioSource(source: CanvasAudioSource) {
+    if (source.storageKey && resourceIdFromStorageKey(source.storageKey)) {
+        const cached = await cacheResourceObjectUrl(source.storageKey).catch(() => "");
+        return cached || source.content;
+    }
+    return source.content;
+}
+
+function snapshotEqual(left: CanvasAudioPlaybackSnapshot, right: CanvasAudioPlaybackSnapshot) {
+    return left.phase === right.phase && left.currentTimeMs === right.currentTimeMs && left.durationMs === right.durationMs && left.error === right.error;
+}
+
+function mediaErrorMessage(error: unknown) {
+    if (error instanceof Error && error.message.trim()) return error.message;
+    return "音频播放失败";
+}
+
+export const canvasAudioPlayback = new CanvasAudioPlaybackController();
+
+export const getCanvasAudioPlaybackSnapshot = (nodeId: string) => canvasAudioPlayback.getSnapshot(nodeId);
+export const subscribeCanvasAudioNode = (nodeId: string, listener: Listener) => canvasAudioPlayback.subscribeNode(nodeId, listener);
+export const toggleCanvasAudio = (source: CanvasAudioSource) => canvasAudioPlayback.toggle(source);
+export const pauseCanvasAudio = (nodeId?: string) => canvasAudioPlayback.pause(nodeId);
+export const stopCanvasAudio = (nodeId?: string) => canvasAudioPlayback.stop(nodeId);
+export const seekCanvasAudio = (nodeId: string, timeMs: number, source?: CanvasAudioSource) => canvasAudioPlayback.seek(nodeId, timeMs, source);
diff --git a/web/src/services/canvas-video-preview.ts b/web/src/services/canvas-video-preview.ts
new file mode 100644
index 000000000..61c36d26e
--- /dev/null
+++ b/web/src/services/canvas-video-preview.ts
@@ -0,0 +1,85 @@
+import { captureVideoPoster } from "@/lib/video-poster";
+import { resolveMediaUrl } from "@/services/file-storage";
+import { uploadImage } from "@/services/image-storage";
+import type { CanvasNodeData, CanvasNodeMetadata } from "@/types/canvas";
+
+type VideoPreview = NonNullable<CanvasNodeMetadata["videoPreview"]>;
+
+const previewRequests = new Map<string, Promise<VideoPreview | null>>();
+
+export function hydrateCanvasVideoPreview(node: CanvasNodeData, signal?: AbortSignal) {
+    const sourceKey = node.metadata?.storageKey || node.metadata?.content || "";
+    if (!sourceKey) return Promise.resolve(null);
+    const requestKey = `${node.id}:${sourceKey}`;
+    const existing = previewRequests.get(requestKey);
+    if (existing) return existing;
+
+    const request = generateCanvasVideoPreview(node, signal).catch((error: unknown) => {
+        if (error instanceof DOMException && error.name === "AbortError") {
+            previewRequests.delete(requestKey);
+            throw error;
+        }
+        return null;
+    });
+    previewRequests.set(requestKey, request);
+    return request;
+}
+
+async function generateCanvasVideoPreview(node: CanvasNodeData, signal?: AbortSignal): Promise<VideoPreview | null> {
+    await waitForBrowserIdle(signal);
+    throwIfAborted(signal);
+    const source = await resolveMediaUrl(node.metadata?.storageKey, node.metadata?.content || "");
+    if (!source) return null;
+    const captured = await captureVideoPoster(source, { signal, maxWidth: 400 });
+    throwIfAborted(signal);
+    if (!captured.poster) return null;
+    const preview = await uploadImage(captured.poster);
+    throwIfAborted(signal);
+    return {
+        content: preview.url,
+        storageKey: preview.storageKey,
+        width: preview.width,
+        height: preview.height,
+        bytes: preview.bytes,
+        mimeType: preview.mimeType,
+    };
+}
+
+function waitForBrowserIdle(signal?: AbortSignal) {
+    return new Promise<void>((resolve, reject) => {
+        if (signal?.aborted) {
+            reject(abortError());
+            return;
+        }
+        let idleId: number | undefined;
+        let timerId: ReturnType<typeof globalThis.setTimeout> | undefined;
+        const idleWindow = window as unknown as {
+            requestIdleCallback?: Window["requestIdleCallback"];
+            cancelIdleCallback?: Window["cancelIdleCallback"];
+        };
+        const cleanup = () => {
+            signal?.removeEventListener("abort", handleAbort);
+            if (idleId !== undefined) idleWindow.cancelIdleCallback?.(idleId);
+            if (timerId !== undefined) globalThis.clearTimeout(timerId);
+        };
+        const finish = () => {
+            cleanup();
+            resolve();
+        };
+        const handleAbort = () => {
+            cleanup();
+            reject(abortError());
+        };
+        signal?.addEventListener("abort", handleAbort, { once: true });
+        if (idleWindow.requestIdleCallback) idleId = idleWindow.requestIdleCallback(finish, { timeout: 1_000 });
+        else timerId = globalThis.setTimeout(finish, 250);
+    });
+}
+
+function throwIfAborted(signal?: AbortSignal) {
+    if (signal?.aborted) throw abortError();
+}
+
+function abortError() {
+    return new DOMException("Canvas video preview hydration aborted", "AbortError");
+}
diff --git a/web/src/services/file-storage.ts b/web/src/services/file-storage.ts
index 8e01c40e5..681faabaa 100644
--- a/web/src/services/file-storage.ts
+++ b/web/src/services/file-storage.ts
@@ -2,10 +2,12 @@ import localforage from "localforage";
 import { nanoid } from "nanoid";
 
 import { getActiveUserScope } from "@/lib/user-scope";
+import { captureVideoPoster, detectVideoAudioTrackFromBlob } from "@/lib/video-poster";
 import { resourceFileUrl, resourceIdFromStorageKey, resourceStorageKey, uploadResourceFile } from "@/services/api/resources";
+import { uploadImage, type UploadedImage } from "@/services/image-storage";
 import { getCachedResourceBlob, getCachedResourceObjectUrl, primeResourceBlobCache } from "@/services/resource-blob-cache";
 
-export type UploadedFile = { url: string; storageKey: string; bytes: number; mimeType: string; width?: number; height?: number; durationMs?: number };
+export type UploadedFile = { url: string; storageKey: string; bytes: number; mimeType: string; width?: number; height?: number; durationMs?: number; hasAudio?: boolean; preview?: UploadedImage };
 
 const store = localforage.createInstance({ name: "infinite-canvas", storeName: "media_files" });
 const objectUrls = new Map<string, string>();
@@ -13,13 +15,24 @@ const objectUrls = new Map<string, string>();
 export async function uploadMediaFile(input: string | Blob, prefix = "file"): Promise<UploadedFile> {
     const blob = typeof input === "string" ? await (await fetch(input)).blob() : input;
     const previewUrl = URL.createObjectURL(blob);
-    const meta: { width?: number; height?: number; durationMs?: number } = blob.type.startsWith("video/") ? await readVideoMeta(previewUrl) : blob.type.startsWith("audio/") ? await readAudioMeta(previewUrl) : {};
+    const captured = blob.type.startsWith("video/") ? await captureVideoPoster(previewUrl).catch(() => undefined) : undefined;
+    // Browser track probes can report a false negative for MP4/MOV files.
+    // Re-check only when capture did not positively confirm an audio track so
+    // normal uploads avoid an extra full-blob parse.
+    const parsedHasAudio = blob.type.startsWith("video/") && captured?.hasAudio !== true ? await detectVideoAudioTrackFromBlob(blob) : undefined;
+    const resolvedHasAudio = parsedHasAudio ?? (captured?.hasAudio === false ? undefined : captured?.hasAudio);
+    const meta: { width?: number; height?: number; durationMs?: number; hasAudio?: boolean } = captured
+        ? { width: captured.width, height: captured.height, durationMs: captured.durationMs, hasAudio: resolvedHasAudio }
+        : blob.type.startsWith("audio/")
+            ? await readAudioMeta(previewUrl)
+            : { hasAudio: resolvedHasAudio };
+    const poster = captured?.poster ? await uploadImage(captured.poster).catch(() => undefined) : undefined;
     try {
         const kind = blob.type.startsWith("video/") ? "video" : blob.type.startsWith("audio/") ? "audio" : "file";
         const resource = await uploadResourceFile(blob, kind, { ...meta, fileName: input instanceof File ? input.name : undefined });
         await primeResourceBlobCache(resourceStorageKey(resource.id), blob).catch(() => "");
         URL.revokeObjectURL(previewUrl);
-        return { url: resource.publicUrl || resourceFileUrl(resource.id), storageKey: resourceStorageKey(resource.id), bytes: resource.size || blob.size, mimeType: resource.mimeType || blob.type || "application/octet-stream", width: resource.width || meta.width, height: resource.height || meta.height, durationMs: resource.durationMs || meta.durationMs };
+        return { url: resource.publicUrl || resourceFileUrl(resource.id), storageKey: resourceStorageKey(resource.id), bytes: resource.size || blob.size, mimeType: resource.mimeType || blob.type || "application/octet-stream", width: resource.width || meta.width, height: resource.height || meta.height, durationMs: resource.durationMs || meta.durationMs, hasAudio: meta.hasAudio, preview: poster };
     } catch {
         // OSS is optional during local/self-hosted setup. Keep the existing local fallback.
     }
@@ -27,7 +40,7 @@ export async function uploadMediaFile(input: string | Blob, prefix = "file"): Pr
     await store.setItem(storageKey, blob);
     const url = previewUrl;
     objectUrls.set(storageKey, url);
-    return { url, storageKey, bytes: blob.size, mimeType: blob.type || "application/octet-stream", ...meta };
+    return { url, storageKey, bytes: blob.size, mimeType: blob.type || "application/octet-stream", ...meta, preview: poster };
 }
 
 export async function resolveMediaUrl(storageKey?: string, fallback = "") {
@@ -89,16 +102,6 @@ export function collectMediaStorageKeys(value: unknown, keys = new Set<string>()
     return keys;
 }
 
-function readVideoMeta(url: string) {
-    return new Promise<{ width: number; height: number; durationMs?: number }>((resolve) => {
-        const video = document.createElement("video");
-        const done = () => resolve({ width: video.videoWidth || 1280, height: video.videoHeight || 720, durationMs: Number.isFinite(video.duration) ? Math.round(video.duration * 1000) : undefined });
-        video.onloadedmetadata = done;
-        video.onerror = done;
-        video.src = url;
-    });
-}
-
 function readAudioMeta(url: string) {
     return new Promise<{ durationMs?: number }>((resolve) => {
         const audio = document.createElement("audio");
diff --git a/web/src/services/project-asset-sync.ts b/web/src/services/project-asset-sync.ts
index 07297e919..ca7968f41 100644
--- a/web/src/services/project-asset-sync.ts
+++ b/web/src/services/project-asset-sync.ts
@@ -1,4 +1,5 @@
 import { canvasNodeToAsset, declaredCanvasNodeAssetCategory, findCanvasNodeAsset, type CanvasAssetSource } from "@/lib/canvas/canvas-node-asset";
+import { canvasVideoAssetPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import { readImageMeta } from "@/lib/image-utils";
 import { parseBackendGenerationResult, type BackendGenerationResult } from "@/services/api/generation-task";
 import { linkProjectAsset, moveProjectAsset, updateProjectAssetCategory } from "@/services/api/projects";
@@ -284,7 +285,7 @@ async function generationOutputAsset(input: Parameters<MaterializeGenerationTask
         return {
             kind: "video",
             title: "生成视频",
-            coverUrl: stored.url,
+            coverUrl: canvasVideoAssetPreviewUrl(stored.url),
             tags: ["生成"],
             status: "confirmed",
             source: "生成任务",
diff --git a/web/src/stores/use-asset-store.ts b/web/src/stores/use-asset-store.ts
index 0efbe9f34..af3e39c1b 100644
--- a/web/src/stores/use-asset-store.ts
+++ b/web/src/stores/use-asset-store.ts
@@ -17,7 +17,7 @@ export type AssetCategory = "character" | "environment" | "wardrobe" | "prop" |
 export type AssetStatus = "draft" | "review" | "confirmed" | "archived";
 export type TextAsset = AssetBase<"text"> & { data: { content: string } };
 export type ImageAsset = AssetBase<"image"> & { data: { dataUrl: string; storageKey?: string; width: number; height: number; bytes: number; mimeType: string } };
-export type VideoAsset = AssetBase<"video"> & { data: { url: string; storageKey?: string; width: number; height: number; durationMs?: number; bytes: number; mimeType: string } };
+export type VideoAsset = AssetBase<"video"> & { data: { url: string; storageKey?: string; width: number; height: number; durationMs?: number; hasAudio?: boolean; bytes: number; mimeType: string } };
 export type AudioAsset = AssetBase<"audio"> & { data: { url: string; storageKey?: string; durationMs?: number; bytes: number; mimeType: string } };
 export type ModelAsset = AssetBase<"model"> & { data: { url: string; storageKey?: string; bytes: number; mimeType: string; fileName: string } };
 export type EntityAsset = AssetBase<"entity"> & { data: { definition: Record<string, unknown> } };
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 43bee4d17..16a9f8436 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -7087,6 +7087,8 @@
         left: 0;
         height: 30px;
         content: "";
+        /* Keep the hover bridge from covering the node's external title. */
+        pointer-events: none;
     }
 
     .canvas-floating-dock {
@@ -9329,7 +9331,9 @@
     }
 
     .canvas-world-raster-layer {
-        zoom: var(--canvas-committed-scale);
+        /* 使用标准 transform，避免搜狗 Chromium 对 zoom 下绝对定位的偏移。 */
+        transform: scale(var(--canvas-committed-scale));
+        transform-origin: 0 0;
     }
 
     [data-canvas-viewport-interacting="true"] .canvas-world-layer {
diff --git a/web/src/types/canvas.ts b/web/src/types/canvas.ts
index 6cddbd2f3..d8eb32ab9 100644
--- a/web/src/types/canvas.ts
+++ b/web/src/types/canvas.ts
@@ -194,6 +194,14 @@ export type CanvasNodeMetadata = {
           };
     content?: string;
     previewContent?: string;
+    videoPreview?: {
+        content: string;
+        storageKey?: string;
+        width?: number;
+        height?: number;
+        bytes?: number;
+        mimeType?: string;
+    };
     richText?: Record<string, unknown>;
     composerContent?: string;
     prompt?: string;
@@ -244,6 +252,8 @@ export type CanvasNodeMetadata = {
     mimeType?: string;
     bytes?: number;
     durationMs?: number;
+    /** Whether the video file contains an audio track when this is known. */
+    hasAudio?: boolean;
     assetId?: string;
     assetTags?: string[];
     assetCategory?: "character" | "environment" | "wardrobe" | "prop" | "weapon" | "style" | "other";
diff --git a/web/test/canvas-audio-playback.test.ts b/web/test/canvas-audio-playback.test.ts
new file mode 100644
index 000000000..8ecdca964
--- /dev/null
+++ b/web/test/canvas-audio-playback.test.ts
@@ -0,0 +1,151 @@
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+
+import { canvasAudioPlayback, getCanvasAudioPlaybackSnapshot, seekCanvasAudio, subscribeCanvasAudioNode, toggleCanvasAudio } from "../src/services/canvas-audio-playback";
+
+type AudioEventName = "loadedmetadata" | "timeupdate" | "playing" | "pause" | "ended" | "error" | "durationchange";
+
+class FakeAudio {
+    static instances: FakeAudio[] = [];
+    currentTime = 0;
+    duration = 3;
+    preload = "";
+    src = "";
+    private readonly handlers = new Map<AudioEventName, Set<() => void>>();
+
+    constructor() {
+        FakeAudio.instances.push(this);
+    }
+
+    addEventListener(type: AudioEventName, listener: () => void) {
+        const listeners = this.handlers.get(type) || new Set<() => void>();
+        listeners.add(listener);
+        this.handlers.set(type, listeners);
+    }
+
+    removeAttribute(name: string) {
+        if (name === "src") this.src = "";
+    }
+
+    load() {
+        if (this.src) this.emit("loadedmetadata");
+    }
+
+    async play() {
+        this.emit("playing");
+    }
+
+    pause() {
+        this.emit("pause");
+    }
+
+    emit(type: AudioEventName) {
+        this.handlers.get(type)?.forEach((listener) => listener());
+    }
+}
+
+const originalAudio = globalThis.Audio;
+
+beforeAll(() => {
+    globalThis.Audio = FakeAudio as unknown as typeof Audio;
+});
+
+afterAll(() => {
+    canvasAudioPlayback.stop();
+    FakeAudio.instances = [];
+    globalThis.Audio = originalAudio;
+});
+
+describe("canvas audio playback", () => {
+    test("creates the audio element only after play and reuses one instance", async () => {
+        expect(FakeAudio.instances).toHaveLength(0);
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("idle");
+
+        await toggleCanvasAudio({ nodeId: "audio-a", content: "data:audio/mpeg;base64,a" });
+
+        expect(FakeAudio.instances).toHaveLength(1);
+        expect(FakeAudio.instances[0]?.src).toContain("data:audio/mpeg");
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("playing");
+
+        await toggleCanvasAudio({ nodeId: "audio-b", content: "data:audio/mpeg;base64,b" });
+
+        expect(FakeAudio.instances).toHaveLength(1);
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("idle");
+        expect(getCanvasAudioPlaybackSnapshot("audio-b").phase).toBe("playing");
+    });
+
+    test("notifies only the active node for playback progress", async () => {
+        canvasAudioPlayback.stop();
+        let audioUpdates = 0;
+        let otherUpdates = 0;
+        const unsubscribeAudio = subscribeCanvasAudioNode("audio-a", () => {
+            audioUpdates += 1;
+        });
+        const unsubscribeOther = subscribeCanvasAudioNode("audio-b", () => {
+            otherUpdates += 1;
+        });
+
+        await toggleCanvasAudio({ nodeId: "audio-a", content: "data:audio/mpeg;base64,a" });
+        const fakeAudio = FakeAudio.instances[0];
+        if (!fakeAudio) throw new Error("fake audio was not created");
+        const updatesBeforeProgress = audioUpdates;
+        fakeAudio.currentTime = 1.25;
+        fakeAudio.emit("timeupdate");
+
+        expect(audioUpdates).toBeGreaterThan(updatesBeforeProgress);
+        expect(otherUpdates).toBe(0);
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").currentTimeMs).toBe(1250);
+
+        unsubscribeAudio();
+        unsubscribeOther();
+    });
+
+    test("allows seeking before the first play without autoplaying", async () => {
+        canvasAudioPlayback.stop();
+        const instancesBeforeSeek = FakeAudio.instances.length;
+
+        await seekCanvasAudio("audio-seek", 1200, { nodeId: "audio-seek", content: "data:audio/mpeg;base64,seek", durationMs: 3000 });
+
+        expect(FakeAudio.instances).toHaveLength(instancesBeforeSeek);
+        expect(FakeAudio.instances.at(-1)?.currentTime).toBe(1.2);
+        expect(getCanvasAudioPlaybackSnapshot("audio-seek").phase).toBe("paused");
+        expect(getCanvasAudioPlaybackSnapshot("audio-seek").currentTimeMs).toBe(1200);
+    });
+
+    test("supports pause, seek, and replay after ending", async () => {
+        canvasAudioPlayback.stop();
+        await toggleCanvasAudio({ nodeId: "audio-a", content: "data:audio/mpeg;base64,a" });
+        const fakeAudio = FakeAudio.instances[0];
+        if (!fakeAudio) throw new Error("fake audio was not created");
+
+        await toggleCanvasAudio({ nodeId: "audio-a", content: "data:audio/mpeg;base64,a" });
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("paused");
+
+        await toggleCanvasAudio({ nodeId: "audio-a", content: "data:audio/mpeg;base64,a" });
+        seekCanvasAudio("audio-a", 1500);
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").currentTimeMs).toBe(1500);
+
+        fakeAudio.emit("ended");
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("ended");
+
+        await seekCanvasAudio("audio-a", 1200);
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("paused");
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").currentTimeMs).toBe(1200);
+
+        await toggleCanvasAudio({ nodeId: "audio-a", content: "data:audio/mpeg;base64,a" });
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("playing");
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").currentTimeMs).toBe(1200);
+    });
+
+    test("resets the previous node when seeking another audio", async () => {
+        canvasAudioPlayback.stop();
+        await toggleCanvasAudio({ nodeId: "audio-a", content: "data:audio/mpeg;base64,a" });
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("playing");
+
+        await seekCanvasAudio("audio-b", 800, { nodeId: "audio-b", content: "data:audio/mpeg;base64,b", durationMs: 3000 });
+
+        expect(getCanvasAudioPlaybackSnapshot("audio-a").phase).toBe("idle");
+        expect(getCanvasAudioPlaybackSnapshot("audio-b").phase).toBe("paused");
+        expect(getCanvasAudioPlaybackSnapshot("audio-b").currentTimeMs).toBe(800);
+        expect(FakeAudio.instances).toHaveLength(1);
+    });
+});
diff --git a/web/test/canvas-batch-connection.test.ts b/web/test/canvas-batch-connection.test.ts
index e9b7678f3..785bd8a25 100644
--- a/web/test/canvas-batch-connection.test.ts
+++ b/web/test/canvas-batch-connection.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "bun:test";
 
 import { buildBatchConnectionCreateRequest, hasBatchConnectionCandidate, planBatchConnections } from "@/lib/canvas/canvas-batch-connection";
+import { canvasConnectionPath } from "@/components/canvas/canvas-connections";
 import { defaultConfig } from "@/stores/use-config-store";
 import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "@/types/canvas";
 
@@ -92,6 +93,35 @@ describe("planBatchConnections", () => {
     });
 });
 
+describe("canvas connection anchors", () => {
+    it("keeps ordinary node edges centered even when legacy ratios exist", () => {
+        const connection: CanvasConnection = {
+            id: "ratio-test",
+            fromNodeId: "text-a",
+            toNodeId: "text-b",
+            fromAnchorRatio: 0.2,
+            toAnchorRatio: 0.8,
+        };
+        const result = canvasConnectionPath(connection, nodes[0], nodes[1]);
+
+        expect(result.startY).toBe(90);
+        expect(result.endY).toBe(310);
+    });
+
+    it("keeps storyboard row handles positioned independently from the node center", () => {
+        const connection: CanvasConnection = {
+            id: "storyboard-row-test",
+            fromNodeId: "text-a",
+            toNodeId: "script",
+            toHandleId: "row:row-1",
+        };
+        const result = canvasConnectionPath(connection, nodes[0], nodes[4]);
+
+        expect(result.startY).toBe(90);
+        expect(result.endY).toBeGreaterThan(90);
+    });
+});
+
 describe("buildBatchConnectionCreateRequest", () => {
     it("keeps unique eligible sources and uses the first one for the pending connection", () => {
         const request = buildBatchConnectionCreateRequest(["frame", "text-a", "text-a", "text-b"], nodes, { x: 900, y: 240 });
diff --git a/web/test/canvas-cross-browser-positioning.test.ts b/web/test/canvas-cross-browser-positioning.test.ts
new file mode 100644
index 000000000..eab9e05ed
--- /dev/null
+++ b/web/test/canvas-cross-browser-positioning.test.ts
@@ -0,0 +1,15 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { describe, expect, test } from "bun:test";
+
+const stylesSource = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
+
+describe("canvas cross-browser positioning", () => {
+    test("uses standard transforms for the committed raster layer", () => {
+        const rasterLayer = stylesSource.match(/\.canvas-world-raster-layer\s*\{[\s\S]*?\}/)?.[0] || "";
+        expect(rasterLayer).toContain("transform: scale(var(--canvas-committed-scale))");
+        expect(rasterLayer).toContain("transform-origin: 0 0");
+        expect(rasterLayer).not.toContain("zoom:");
+    });
+});
diff --git a/web/test/canvas-media-performance.test.ts b/web/test/canvas-media-performance.test.ts
new file mode 100644
index 000000000..4ce9aa3e0
--- /dev/null
+++ b/web/test/canvas-media-performance.test.ts
@@ -0,0 +1,285 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { describe, expect, test } from "bun:test";
+
+import { resolveActiveCanvasMediaNodeId } from "../src/lib/canvas/canvas-performance-mode";
+import { videoMetadata } from "../src/lib/canvas/canvas-generation-task-sync";
+import { canvasNodeVideoPreviewUrl, canvasVideoAssetPreviewUrl } from "../src/lib/canvas/canvas-media-preview";
+import { collectImageStorageKeys } from "../src/services/image-storage";
+import { CanvasNodeType, type CanvasNodeData } from "../src/types/canvas";
+import { detectVideoAudioTrack, detectVideoAudioTrackFromBlob, detectVideoAudioTrackFromUrl } from "../src/lib/video-poster";
+
+const canvasNodeContentSource = readFileSync(resolve(import.meta.dir, "../src/components/canvas/canvas-node-content.tsx"), "utf8");
+const canvasAudioPlayerSource = readFileSync(resolve(import.meta.dir, "../src/components/canvas/canvas-audio-player.tsx"), "utf8");
+const canvasMentionSource = readFileSync(resolve(import.meta.dir, "../src/components/canvas/canvas-resource-mention-textarea.tsx"), "utf8");
+const canvasNodeSource = readFileSync(resolve(import.meta.dir, "../src/components/canvas/canvas-node.tsx"), "utf8");
+const videoPlayerSource = readFileSync(resolve(import.meta.dir, "../src/components/video-player.tsx"), "utf8");
+
+function node(id: string, type: CanvasNodeType): CanvasNodeData {
+    return { id, type, title: id, position: { x: 0, y: 0 }, width: 320, height: 180, metadata: {} };
+}
+
+describe("canvas media activation", () => {
+    const nodes = [node("video", CanvasNodeType.Video), node("audio", CanvasNodeType.Audio), node("image", CanvasNodeType.Image)];
+    const nodeById = new Map(nodes.map((item) => [item.id, item]));
+
+    test("activates exactly one selected video or audio node", () => {
+        expect(resolveActiveCanvasMediaNodeId(new Set(["video"]), nodeById)).toBe("video");
+        expect(resolveActiveCanvasMediaNodeId(new Set(["audio"]), nodeById)).toBe("audio");
+    });
+
+    test("keeps media inactive for empty, multi-selection, and non-media selection", () => {
+        expect(resolveActiveCanvasMediaNodeId(new Set(), nodeById)).toBeNull();
+        expect(resolveActiveCanvasMediaNodeId(new Set(["video", "audio"]), nodeById)).toBeNull();
+        expect(resolveActiveCanvasMediaNodeId(new Set(["image"]), nodeById)).toBeNull();
+        expect(resolveActiveCanvasMediaNodeId(new Set(["missing"]), nodeById)).toBeNull();
+    });
+});
+
+describe("canvas dimension header rendering", () => {
+    test("tracks live viewport scale without React width commits", () => {
+        expect(canvasNodeSource).toContain("calc(var(--canvas-node-width) * var(--canvas-live-scale, 1))");
+        expect(canvasNodeSource).toContain('"--canvas-node-width": `${node.width}px`');
+    });
+});
+
+describe("audio canvas interaction", () => {
+    test("uses a lightweight player without a native audio element or inactive mask", () => {
+        expect(canvasNodeContentSource).toContain("<CanvasAudioPlayer node={node} theme={theme} />");
+        expect(canvasNodeContentSource).not.toContain("<audio");
+        expect(canvasNodeContentSource).not.toContain("InactiveAudioPreview");
+        expect(canvasNodeContentSource.match(/function AudioNodeContent[\s\S]*?\n}\n/)?.[0] || "").not.toContain("useNodeResourceUrl");
+        expect(canvasAudioPlayerSource).not.toContain("播放结束，点击重新播放");
+        expect(canvasAudioPlayerSource).not.toContain("pr-24");
+        expect(canvasAudioPlayerSource).toContain("formatAudioTime(snapshot.currentTimeMs)}/{durationMs ? formatAudioTime(durationMs) : \"--:--\"");
+    });
+
+    test("isolates player controls from canvas gestures", () => {
+        expect(canvasAudioPlayerSource).toContain("onPointerDown={stopCanvasEvent}");
+        expect(canvasAudioPlayerSource).toContain("onMouseDown={stopCanvasEvent}");
+        expect(canvasAudioPlayerSource).toContain("onWheel={stopCanvasEvent}");
+        expect(canvasAudioPlayerSource).toContain("onClick={(event) => {");
+        expect(canvasAudioPlayerSource).toContain("togglePlayback();");
+    });
+
+});
+
+describe("video canvas controls", () => {
+    test("keeps the compact video's volume control visible", async () => {
+        const playerCSS = await Bun.file(new URL("../src/components/video-player.css", import.meta.url)).text();
+        expect(playerCSS).toContain('data-player-variant="compact"');
+        expect(playerCSS).toContain(".vds-controls-group:has(.vds-time-slider)");
+        expect(playerCSS).toContain(".vds-controls-group:has(.vds-time-group)");
+        expect(playerCSS).toContain("bottom: calc(100% + var(--gap, 10px))");
+        expect(playerCSS).toContain(".vds-video-layout[data-sm] .vds-volume .vds-volume-popup");
+        expect(playerCSS).toContain("left: 50%;");
+        expect(playerCSS).toContain("place-items: center;");
+        expect(playerCSS).toContain(".vds-video-layout[data-sm] .vds-volume .vds-volume-slider");
+        expect(playerCSS).toContain(".vds-volume .vds-volume-popup::after");
+        expect(playerCSS).toContain("bottom: calc(-1 * var(--gap, 6px))");
+        expect(playerCSS).toContain(".canvas-video-player:is([data-fullscreen], :fullscreen, :-webkit-full-screen) .vds-video-layout .vds-controls-group:has(.vds-time-group)");
+        expect(playerCSS).toContain("min-height: 82px;");
+        expect(playerCSS).toContain("margin: 0;");
+        expect(playerCSS).toContain("right: calc(var(--canvas-video-control-size) + var(--canvas-video-control-gap) + 22px)");
+        expect(playerCSS).toContain(".vds-controls-group:has(.vds-time-group) .vds-fullscreen-button");
+        expect(playerCSS).toContain("margin-left: auto;");
+        expect(playerCSS).toContain(".vds-controls-group:has(.vds-time-slider) .vds-time-slider");
+        expect(playerCSS).toContain("pointer-events: auto !important;");
+        expect(playerCSS).toContain("touch-action: none;");
+        expect(playerCSS).toContain("z-index: 11;");
+        expect(playerCSS).toContain("left: calc(var(--canvas-video-control-size) * 3 + var(--canvas-video-control-gap) + 40px)");
+        expect(playerCSS).toContain("padding: 0 0 0 calc(var(--canvas-video-control-size) + var(--canvas-video-control-gap) + 2px)");
+        expect(playerCSS).toContain("pointer-events: none !important;");
+        expect(playerCSS).toContain(".vds-controls-group:has(> .vds-play-button) > .vds-controls-spacer");
+        expect(playerCSS).toContain(".vds-controls-group:has(> .vds-play-button) .vds-play-button");
+        expect(playerCSS).toContain("transform: none;");
+        expect(playerCSS).toContain(".vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-group)");
+        expect(playerCSS).toContain(".vds-video-layout[data-lg] .vds-controls-group:has(.vds-time-slider)");
+        expect(playerCSS).toContain("bottom: calc(var(--canvas-video-control-size) + 12px)");
+        expect(playerCSS).toContain("flex: 0 0 var(--canvas-video-control-size)");
+        expect(playerCSS).toContain("flex-shrink: 0");
+        expect(playerCSS).toContain("--video-volume-height: 64px");
+        expect(playerCSS).toContain("--video-volume-bg: rgba(12, 13, 16, 0.92)");
+        expect(playerCSS).toContain("--video-volume-panel-width: 42px");
+        expect(playerCSS).toContain("--video-volume-slider-width: 28px");
+        expect(playerCSS).toContain("width: var(--video-volume-panel-width)");
+        expect(playerCSS).toContain("--media-slider-width: var(--video-volume-slider-width)");
+        expect(playerCSS).toContain('.canvas-video-player[data-no-audio="true"] .vds-volume .vds-mute-button');
+        expect(playerCSS).toContain("cursor: not-allowed;");
+        expect(playerCSS).toContain("data-player-variant=\"compact\"]:is([data-fullscreen], :fullscreen, :-webkit-full-screen)");
+        expect(playerCSS).toContain("height: var(--canvas-video-control-size);");
+        expect(playerCSS).toContain("min-height: var(--canvas-video-control-size);");
+        expect(playerCSS).toContain("padding: 0 0 0 calc(var(--canvas-video-control-size)");
+        expect(playerCSS).toContain(".vds-controls-group:has(.vds-volume) > :not(.vds-volume)");
+        expect(playerCSS).toContain("bottom: max(12px, env(safe-area-inset-bottom))");
+        expect(playerCSS).toContain("play, time, progress, volume, fullscreen");
+        expect(playerCSS).toContain("pointer-events: auto;");
+        expect(playerCSS).toContain(".vds-controls-group > :is(.vds-caption-button, .vds-download-button, .vds-pip-button, .vds-airplay-button, .vds-google-cast-button, .vds-chapters-button)");
+        expect(playerCSS).not.toContain("canvas-video-player-compact:not([data-fullscreen]) .vds-video-layout[data-sm] .vds-controls-group:first-child");
+        expect(playerCSS).not.toContain("canvas-video-player-compact:not([data-fullscreen]) .vds-video-layout[data-lg] .vds-controls-group:last-child");
+    });
+
+    test("does not duplicate the node title or expose player settings", () => {
+        expect(videoPlayerSource).toContain("chapterTitle: null");
+        expect(videoPlayerSource).toContain("settingsMenu: null");
+        expect(videoPlayerSource).toContain('data-player-variant={compactControls ? "compact" : "dialog"}');
+    });
+
+    test("uses the muted icon state only when a video is known to have no audio", () => {
+        expect(videoPlayerSource).toContain("hasAudio?: boolean");
+        expect(videoPlayerSource).toContain("mediaPlayerRef.current?.el");
+        expect(videoPlayerSource).toContain("muted={noAudio ? true : undefined}");
+        expect(videoPlayerSource).toContain('data-no-audio={noAudio ? "true" : undefined}');
+        expect(videoPlayerSource).toContain("VolumeLow: defaultLayoutIcons.MuteButton.Mute");
+        expect(videoPlayerSource).toContain("VolumeHigh: defaultLayoutIcons.MuteButton.Mute");
+        expect(videoPlayerSource).toContain("muteButton.disabled = noAudio;");
+        expect(videoPlayerSource).toContain("(volumeSlider as HTMLElement & { disabled?: boolean }).disabled = noAudio;");
+        expect(videoPlayerSource).toContain('event.target.closest(".vds-volume,.vds-mute-button,.vds-volume-slider")');
+        expect(videoPlayerSource).toContain("onKeyDown={stopCanvasControlInteraction}");
+        expect(videoPlayerSource).not.toContain("onPointerDownCapture={stopCanvasControlInteraction}");
+        expect(videoPlayerSource).not.toContain("onMouseDownCapture={stopCanvasControlInteraction}");
+        expect(videoPlayerSource).not.toContain("onClickCapture={stopCanvasControlClick}");
+        expect(canvasNodeContentSource).toContain("hasAudio={inferVideoHasAudio(node.metadata)} autoPlay={mediaActive}");
+        expect(canvasNodeContentSource).toContain('if (["false", "0", "off", "no", "disabled"].includes(value || "")) return false;');
+    });
+
+    test("recognizes an explicitly empty audio track list", () => {
+        const media = { audioTracks: { length: 0 }, readyState: 4 } as unknown as HTMLMediaElement;
+        expect(detectVideoAudioTrack(media)).toBeUndefined();
+        expect(detectVideoAudioTrack({ audioTracks: { length: 0 }, readyState: 2 } as unknown as HTMLMediaElement)).toBeUndefined();
+    });
+
+    test("does not treat an undecoded audio byte counter as proof of silence", () => {
+        const media = { readyState: 4, webkitAudioDecodedByteCount: 0 } as unknown as HTMLMediaElement;
+        expect(detectVideoAudioTrack(media)).toBeUndefined();
+        expect(detectVideoAudioTrack({ readyState: 4, webkitAudioDecodedByteCount: 128 } as unknown as HTMLMediaElement)).toBe(true);
+    });
+
+    test("does not treat an unsupported empty capture stream as proof of silence", () => {
+        const media = { readyState: 4, captureStream: () => ({ getAudioTracks: () => [] }) } as unknown as HTMLMediaElement;
+        expect(detectVideoAudioTrack(media)).toBeUndefined();
+    });
+
+    test("falls back to the MP4 track handler when browser audio APIs are unavailable", async () => {
+        expect(await detectVideoAudioTrackFromBlob(new Blob([isoBmffMovie(["vide"])], { type: "video/mp4" }))).toBe(false);
+        expect(await detectVideoAudioTrackFromBlob(new Blob([isoBmffMovie(["vide", "soun"])], { type: "video/mp4" }))).toBe(true);
+        expect(await detectVideoAudioTrackFromBlob(new Blob([isoBmffMovie(["soun"])], { type: "video/mp4" }))).toBe(true);
+    });
+
+    test("probes remote MP4 ranges when browser audio APIs are unavailable", async () => {
+        const originalFetch = globalThis.fetch;
+        const movie = isoBmffMovie(["vide"]);
+        globalThis.fetch = (async () => new Response(movie, {
+            status: 206,
+            headers: {
+                "content-range": `bytes 0-${movie.byteLength - 1}/${movie.byteLength}`,
+                "content-length": String(movie.byteLength),
+            },
+        })) as typeof fetch;
+        try {
+            expect(await detectVideoAudioTrackFromUrl(`https://media.example/silent-${movie.byteLength}.mp4`)).toBe(false);
+        } finally {
+            globalThis.fetch = originalFetch;
+        }
+    });
+
+    test("keeps the first activation click from being treated as a node drag", () => {
+        expect(videoPlayerSource).toContain("onClick={stopCanvasControlClick}");
+        expect(videoPlayerSource).toContain('event.target.closest(".vds-controls,.vds-menu-items")');
+        expect(videoPlayerSource).toContain("event.nativeEvent?.composedPath?.()");
+        expect(videoPlayerSource).toContain("if (autoPlay && !autoPlayAttemptedRef.current)");
+        expect(videoPlayerSource).toContain("autoPlayAttemptedRef.current = true;");
+        expect(videoPlayerSource).toContain("noGestures={dataCanvasNoZoom}");
+        expect(videoPlayerSource).toContain("smallLayoutWhen={compactControls ? true : undefined}");
+    });
+
+    test("allows a runtime-positive probe to correct stale silent metadata", () => {
+        expect(videoPlayerSource).toContain("hasAudio === true || detectedHasAudio === true ? true");
+        expect(videoPlayerSource).toContain("hasAudio === false ? false : undefined");
+        expect(videoPlayerSource).toContain("detectedHasAudio === false ? false");
+        expect(videoPlayerSource).toContain("detectVideoAudioTrackFromUrl(src)");
+    });
+
+    test("raises only selected video nodes above the canvas dock so controls remain reachable", () => {
+        expect(canvasNodeSource).toContain('isSelected && data.type === CanvasNodeType.Video ? "z-[var(--z-node-toolbar)]"');
+    });
+});
+
+function isoBmffMovie(handlerTypes: string[]) {
+    const handlers = handlerTypes.map((handlerType) => {
+        const payload = new Uint8Array(20);
+        writeFourcc(payload, 8, handlerType);
+        return box("trak", box("mdia", box("hdlr", payload)));
+    });
+    return concat([box("ftyp", new Uint8Array(4)), box("moov", handlers)]);
+}
+
+function box(type: string, payload: Uint8Array | Uint8Array[]) {
+    const content = Array.isArray(payload) ? concat(payload) : payload;
+    const bytes = new Uint8Array(8 + content.byteLength);
+    new DataView(bytes.buffer).setUint32(0, bytes.byteLength);
+    writeFourcc(bytes, 4, type);
+    bytes.set(content, 8);
+    return bytes;
+}
+
+function concat(parts: Uint8Array[]) {
+    const bytes = new Uint8Array(parts.reduce((total, part) => total + part.byteLength, 0));
+    let offset = 0;
+    for (const part of parts) {
+        bytes.set(part, offset);
+        offset += part.byteLength;
+    }
+    return bytes;
+}
+
+function writeFourcc(bytes: Uint8Array, offset: number, value: string) {
+    for (let index = 0; index < 4; index += 1) bytes[offset + index] = value.charCodeAt(index) || 0;
+}
+
+describe("passive video previews", () => {
+    test("素材引用菜单使用被动视频首帧回退，而不是视频图标", () => {
+        expect(canvasMentionSource).toContain('muted playsInline preload="metadata"');
+        expect(canvasMentionSource).toContain("onloadedmetadata = () => primeVideoPreviewFrame(media)");
+        expect(canvasMentionSource).toContain("onLoadedMetadata={(event) => primeVideoPreviewFrame(event.currentTarget)}");
+        expect(canvasMentionSource).toContain("video.currentTime = Math.min(0.001, video.duration)");
+        expect(canvasMentionSource).toContain("reference.kind === \"video\" && reference.previewUrl");
+    });
+
+    test("persists uploaded posters in video node metadata and prefers them over legacy previews", () => {
+        const metadata = videoMetadata({
+            url: "blob:video",
+            storageKey: "video:user:1",
+            bytes: 1024,
+            mimeType: "video/mp4",
+            hasAudio: false,
+            preview: { url: "blob:poster", storageKey: "image:user:1", width: 400, height: 225, bytes: 256, mimeType: "image/jpeg" },
+        });
+        const video = node("video", CanvasNodeType.Video);
+        video.metadata = { ...metadata, previewContent: "https://example.com/legacy-poster.jpg" };
+
+        expect(metadata.videoPreview).toEqual({ content: "blob:poster", storageKey: "image:user:1", width: 400, height: 225, bytes: 256, mimeType: "image/jpeg" });
+        expect(metadata.hasAudio).toBe(false);
+        expect(collectImageStorageKeys(metadata)).toContain("image:user:1");
+        expect(canvasNodeVideoPreviewUrl(video)).toBe("blob:poster");
+    });
+
+    test("uses explicit posters without ever returning the original video URL", () => {
+        const video = node("video", CanvasNodeType.Video);
+        video.metadata = { content: "https://example.com/video.mp4", previewContent: "https://example.com/poster.jpg" };
+        expect(canvasNodeVideoPreviewUrl(video)).toBe("https://example.com/poster.jpg");
+
+        video.metadata.previewContent = video.metadata.content;
+        expect(canvasNodeVideoPreviewUrl(video)).toBe("");
+    });
+
+    test("derives LibTV snapshots and keeps unsupported videos as lightweight placeholders", () => {
+        const video = node("video", CanvasNodeType.Video);
+        video.metadata = { content: "https://libtv-res.liblib.art/path/video.mp4" };
+        expect(canvasNodeVideoPreviewUrl(video)).toContain("video%2Fsnapshot");
+        expect(canvasVideoAssetPreviewUrl("https://example.com/video.mp4")).toBe("");
+        expect(canvasVideoAssetPreviewUrl("https://example.com/video.mp4", "https://example.com/video.mp4")).toBe("");
+        expect(canvasVideoAssetPreviewUrl("https://example.com/video.mp4", "https://example.com/poster.jpg")).toBe("https://example.com/poster.jpg");
+    });
+});
diff --git a/web/test/canvas-node-drag-overlays.test.ts b/web/test/canvas-node-drag-overlays.test.ts
new file mode 100644
index 000000000..bfc0f47ff
--- /dev/null
+++ b/web/test/canvas-node-drag-overlays.test.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { describe, expect, test } from "bun:test";
+
+const projectSource = readFileSync(resolve(import.meta.dir, "../src/pages/canvas/project.tsx"), "utf8");
+const selectionControllerSource = readFileSync(resolve(import.meta.dir, "../src/pages/canvas/use-canvas-selection-controller.ts"), "utf8");
+
+describe("canvas node drag overlays", () => {
+    test("hides floating editors and selection controls for the whole drag preview", () => {
+        expect(projectSource).toContain("const isCanvasNodeMoving = isNodeDragging || Boolean(dragPreview?.nodeIds.size);");
+        expect(projectSource).toContain("dialogNode.type !== CanvasNodeType.Drawing && !selectionBox && !isCanvasNodeMoving");
+        expect(projectSource).toContain("angleNode?.metadata?.content && !isCanvasNodeMoving");
+        expect(projectSource).toContain("emotionNode?.metadata?.content && !isCanvasNodeMoving");
+        expect(projectSource).toContain("selectedNodeBounds && !selectionBox && !isCanvasNodeMoving");
+        expect(projectSource).toContain("node={isCanvasNodeMoving || nodeImageSettingsOpen || emotionNodeId ? null : toolbarNode}");
+        expect(projectSource).toContain("onNodeDragEnd: handleNodeDragEnd");
+        expect(projectSource).toContain("setDialogNodeId(node.id);");
+        expect(selectionControllerSource).toContain("if (clickedNodeId) onNodeDragEnd?.(clickedNodeId);");
+    });
+});
diff --git a/web/test/canvas-node-stack-order.test.ts b/web/test/canvas-node-stack-order.test.ts
new file mode 100644
index 000000000..f8b5acb58
--- /dev/null
+++ b/web/test/canvas-node-stack-order.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { bringCanvasNodeToFront, sortCanvasNodesByStackOrder } from "../src/lib/canvas/canvas-node-stack-order";
+
+const projectSource = readFileSync(resolve(import.meta.dir, "../src/pages/canvas/project.tsx"), "utf8");
+const worldLayersSource = readFileSync(resolve(import.meta.dir, "../src/pages/canvas/canvas-project-world-layers.tsx"), "utf8");
+const selectionControllerSource = readFileSync(resolve(import.meta.dir, "../src/pages/canvas/use-canvas-selection-controller.ts"), "utf8");
+
+describe("canvas node stack order", () => {
+    test("moves the interacted node to the paint-order end", () => {
+        expect(bringCanvasNodeToFront(["a", "b"], "a")).toEqual(["b", "a"]);
+        expect(bringCanvasNodeToFront(["a", "b"], "c")).toEqual(["a", "b", "c"]);
+        const alreadyFront = ["a", "b"];
+        expect(bringCanvasNodeToFront(alreadyFront, "b")).toBe(alreadyFront);
+    });
+
+    test("keeps untouched nodes stable while the latest node remains on top after deselection", () => {
+        const nodes = [{ id: "a" }, { id: "b" }, { id: "c" }];
+        expect(sortCanvasNodesByStackOrder(nodes, ["b", "a"])).toEqual([{ id: "c" }, { id: "b" }, { id: "a" }]);
+    });
+
+    test("keeps stack state separate from transient canvas selection", () => {
+        expect(projectSource).toContain("const [nodeStackOrder, setNodeStackOrder]");
+        expect(projectSource).toContain("bringNodeToFront(node.id)");
+        expect(projectSource).toContain("onNodeBringToFront: handleNodeBringToFront");
+        expect(projectSource).toContain("const handleNodeBringToFront = useCallback");
+        expect(selectionControllerSource).toContain("onNodeBringToFront?.(nodeId)");
+        expect(selectionControllerSource).toContain("so dragging also survives deselection");
+        expect(projectSource).toContain("onDeselect: handleCanvasDeselect");
+        expect(worldLayersSource).toContain("sortCanvasNodesByStackOrder");
+        expect(worldLayersSource).toContain("props.nodeStackOrder");
+    });
+});
diff --git a/web/test/canvas-node-title-interaction.test.ts b/web/test/canvas-node-title-interaction.test.ts
new file mode 100644
index 000000000..7c7e6694c
--- /dev/null
+++ b/web/test/canvas-node-title-interaction.test.ts
@@ -0,0 +1,14 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { describe, expect, test } from "bun:test";
+
+const canvasStylesSource = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
+
+describe("canvas node title interaction", () => {
+    test("keeps the toolbar hover bridge from intercepting the external title", () => {
+        const hoverBridge = canvasStylesSource.match(/\.canvas-node-toolbar::after\s*\{([\s\S]*?)\}/)?.[1] || "";
+
+        expect(hoverBridge).toContain("pointer-events: none;");
+    });
+});
diff --git a/web/test/canvas-resource-references.test.ts b/web/test/canvas-resource-references.test.ts
index e242e49f8..fc4789329 100644
--- a/web/test/canvas-resource-references.test.ts
+++ b/web/test/canvas-resource-references.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, test } from "bun:test";
 
-import { buildNodeMentionReferences, canvasResourceMentionToken, collectUpstreamVideoNodes } from "../src/lib/canvas/canvas-resource-references";
+import { buildAssetMentionReferences, buildNodeMentionReferences, buildOrderedCanvasResourceReferences, canvasResourceMentionToken, collectUpstreamVideoNodes } from "../src/lib/canvas/canvas-resource-references";
+import { canvasNodeToAsset } from "../src/lib/canvas/canvas-node-asset";
+import { buildNodeGenerationInputs } from "../src/components/canvas/canvas-node-generation";
 import { CanvasNodeType, type CanvasConnection, type CanvasNodeData } from "../src/types/canvas";
 
 function videoNode(id: string): CanvasNodeData {
@@ -76,6 +78,89 @@ describe("collectUpstreamVideoNodes", () => {
 });
 
 describe("canvas resource mention slots", () => {
+    test("素材库视频优先使用封面，没有封面时保留首帧视频回退源", () => {
+        const poster = buildAssetMentionReferences([{
+            id: "video-with-poster",
+            kind: "video",
+            title: "带封面视频",
+            coverUrl: "https://cdn.example.com/poster.jpg",
+            tags: [],
+            createdAt: "2026-08-31T00:00:00.000Z",
+            updatedAt: "2026-08-31T00:00:00.000Z",
+            data: { url: "https://cdn.example.com/video.mp4", storageKey: "resource:video", width: 1280, height: 720, bytes: 1, mimeType: "video/mp4" },
+        }])[0];
+        expect(poster?.previewUrl).toBe("https://cdn.example.com/poster.jpg");
+        expect(poster?.mediaUrl).toBeUndefined();
+
+        const legacy = buildAssetMentionReferences([{
+            id: "legacy-video",
+            kind: "video",
+            title: "旧视频",
+            coverUrl: "https://cdn.example.com/video.mp4",
+            tags: [],
+            createdAt: "2026-08-31T00:00:00.000Z",
+            updatedAt: "2026-08-31T00:00:00.000Z",
+            data: { url: "https://cdn.example.com/video.mp4", storageKey: "resource:legacy-video", width: 1280, height: 720, bytes: 1, mimeType: "video/mp4" },
+        }])[0];
+        expect(legacy?.previewUrl).toBe("");
+        expect(legacy?.mediaUrl).toBe("https://cdn.example.com/video.mp4");
+    });
+
+    test("保存画布视频资产时保留节点已有的静态首帧", () => {
+        const node = videoNode("video-with-poster");
+        node.metadata = {
+            content: "https://cdn.example.com/video.mp4",
+            videoPreview: { content: "https://cdn.example.com/poster.jpg", storageKey: "resource:poster" },
+        };
+        const asset = canvasNodeToAsset(node, { canvasId: "canvas", source: "canvas-upload" });
+        expect(asset?.kind).toBe("video");
+        expect(asset && "coverUrl" in asset ? asset.coverUrl : "").toBe("https://cdn.example.com/poster.jpg");
+    });
+
+    test("上传视频作为生成设置引用时携带首帧预览，而不是播放器地址", () => {
+        const source = videoNode("uploaded-video");
+        source.metadata = {
+            content: "https://cdn.example.com/video.mp4",
+            storageKey: "video:user:uploaded",
+            videoPreview: { content: "blob:poster", storageKey: "image:user:poster", width: 400, height: 225 },
+        };
+        const config: CanvasNodeData = {
+            id: "config",
+            type: CanvasNodeType.Config,
+            title: "生成设置",
+            position: { x: 0, y: 0 },
+            width: 320,
+            height: 180,
+            metadata: {},
+        };
+        const inputs = buildNodeGenerationInputs(config.id, [source, config], [connection(source.id, config.id)]);
+        expect(inputs).toHaveLength(1);
+        expect(inputs[0]?.type).toBe("video");
+        expect(inputs[0]?.previewUrl).toBe("blob:poster");
+        expect(inputs[0]?.previewUrl).not.toBe(source.metadata.content);
+    });
+
+    test("视频引用只暴露静态首帧，不把原视频当缩略图", () => {
+        const genericVideo = videoNode("generic-video");
+        genericVideo.metadata = { content: "https://example.com/video.mp4" };
+        const libtvVideo = videoNode("libtv-video");
+        libtvVideo.metadata = { content: "https://libtv-res.liblib.art/path/video.mp4" };
+
+        const references = buildOrderedCanvasResourceReferences([genericVideo, libtvVideo]);
+        expect(references[0]?.previewUrl).toBe("");
+        expect(references[1]?.previewUrl).toContain("video%2Fsnapshot");
+
+        const uploaded = videoNode("uploaded-video");
+        uploaded.metadata = {
+            content: "https://cdn.example.com/video.mp4",
+            storageKey: "video:user:source",
+            videoPreview: { content: "https://cdn.example.com/poster.jpg", storageKey: "image:user:poster" },
+        };
+        const [uploadedReference] = buildOrderedCanvasResourceReferences([uploaded]);
+        expect(uploadedReference?.previewStorageKey).toBe("image:user:poster");
+        expect(uploadedReference?.storageKey).toBe("video:user:source");
+    });
+
     test("画布节点引用只保存类型位置，不保存节点 ID", () => {
         const target = videoNode("target");
         const image = imageNode("image-a");
diff --git a/web/test/generation-task-local.test.ts b/web/test/generation-task-local.test.ts
index a405065ad..a5429f0aa 100644
--- a/web/test/generation-task-local.test.ts
+++ b/web/test/generation-task-local.test.ts
@@ -192,7 +192,7 @@ test("Canvas task surfaces route Dreamina uncertainty through shared display sem
 
 test("Canvas fullscreen video restores large controls instead of keeping the compact node layout", async () => {
     const playerCSS = await Bun.file(new URL("../src/components/video-player.css", import.meta.url)).text();
-    expect(playerCSS).toContain(".canvas-video-player-compact:not([data-fullscreen])");
+    expect(playerCSS).toContain('.canvas-video-player[data-player-variant="compact"]:not([data-fullscreen])');
     expect(playerCSS).toContain("--media-fullscreen-button-size: 60px");
     expect(playerCSS).toContain("--media-slider-track-height: 8px");
     expect(playerCSS).toContain("min-height: 64px");
diff --git a/web/test/libtv-import.test.ts b/web/test/libtv-import.test.ts
index 11033b4ce..7bb5551ee 100644
--- a/web/test/libtv-import.test.ts
+++ b/web/test/libtv-import.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 
-import { buildLibTVImagePreviewUrl, formatLibTVBatchTime, parseLibTVProjectUUID } from "../src/lib/canvas/libtv-import";
+import { buildLibTVImagePreviewUrl, buildLibTVVideoPreviewUrl, buildLibTVVideoSourceUrl, formatLibTVBatchTime, parseLibTVProjectUUID } from "../src/lib/canvas/libtv-import";
 
 describe("LibTV canvas import helpers", () => {
     test("extracts projectId from LibTV share links", () => {
@@ -23,4 +23,17 @@ describe("LibTV canvas import helpers", () => {
         expect(buildLibTVImagePreviewUrl(original)).toBe("https://libtv-res.liblib.art/path/example.png?x-oss-process=image%2Fresize%2Cw_960");
         expect(buildLibTVImagePreviewUrl("https://example.com/path/example.png")).toBe("https://example.com/path/example.png");
     });
+
+    test("builds a 400px OSS snapshot for LibTV videos only", () => {
+        const original = "https://libtv-res.liblib.art/path/example.mp4";
+        expect(buildLibTVVideoPreviewUrl(original)).toBe("https://libtv-res.liblib.art/path/example.mp4?x-oss-process=video%2Fsnapshot%2Ct_0%2Cf_jpg%2Cw_400%2Cm_fast%2Car_auto");
+        expect(buildLibTVVideoPreviewUrl("https://example.com/path/example.mp4")).toBe("");
+        expect(buildLibTVVideoPreviewUrl("not-a-url")).toBe("");
+    });
+
+    test("removes a persisted OSS snapshot transform before video playback", () => {
+        const snapshot = "https://libtv-res.liblib.art/path/example.mp4?x-oss-process=video%2Fsnapshot%2Ct_0%2Cf_jpg%2Cw_400";
+        expect(buildLibTVVideoSourceUrl(snapshot)).toBe("https://libtv-res.liblib.art/path/example.mp4");
+        expect(buildLibTVVideoSourceUrl("https://example.com/path/example.mp4?x-oss-process=video%2Fsnapshot")).toBe("https://example.com/path/example.mp4?x-oss-process=video%2Fsnapshot");
+    });
 });