From f9869601a3167a95493ce164fcb83412c07e4ed3 Mon Sep 17 00:00:00 2001
From: xuejianwu <374601383@qq.com>
Date: Thu, 30 Jul 2026 09:52:39 +0800
Subject: [PATCH] fix: fit generated videos to any aspect ratio
---
public/app.js | 10 +++++++++-
public/index.html | 4 ++--
public/styles.css | 5 +++--
3 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/public/app.js b/public/app.js
index 3af9c21..4666c20 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1504,15 +1504,20 @@ function renderCompletedVideo(videoUrl, mock) {
if (videoUrl) {
const video = document.createElement("video");
video.controls = true;
+ video.playsInline = true;
+ video.preload = "metadata";
video.src = videoUrl;
+ el.videoStage.classList.add("has-video");
el.videoStage.replaceChildren(video);
} else {
+ el.videoStage.classList.remove("has-video");
el.videoStage.innerHTML = `${mock ? "Mock 流程已完成" : "任务已完成"}${mock ? "输入客户令牌后此处展示真实视频" : "接口响应中未识别到视频 URL，请稍后重试"} `;
}
updateProgress(100, "视频生成完成");
}
function renderGenerationError(message) {
+ el.videoStage.classList.remove("has-video");
const wrapper = document.createElement("div");
wrapper.className = "generation-error";
const title = document.createElement("strong");
@@ -1533,7 +1538,10 @@ function contextualizeGenerationError(message) {
return `${label}在视频接口中不存在。通常表示素材已失效、尚未同步，或不属于当前客户令牌。素材 ID：${assetMatch[0]}`;
}
-function resetVideoStage() { el.videoStage.innerHTML = ''; }
+function resetVideoStage() {
+ el.videoStage.classList.remove("has-video");
+ el.videoStage.innerHTML = '';
+}
function updateProgress(value, title) {
const safe = Math.max(0, Math.min(100, Number(value) || 0));
el.generationTitle.textContent = title;
diff --git a/public/index.html b/public/index.html
index a6d8808..8028e5c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
营响力｜AI 短剧数字人 Demo
-
+