xuejianwu/yingxiangli-duanju
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fit generated videos to any aspect ratio

Browse Source
This commit is contained in:
xuejianwu
2026-07-30 09:52:39 +08:00
parent e111833df6
commit f9869601a3
3 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/app.js
View File

@@ -1504,15 +1504,20 @@ function renderCompletedVideo(videoUrl, mock) {
if (videoUrl) { if (videoUrl) {
const video = document.createElement("video"); const video = document.createElement("video");
video.controls = true; video.controls = true;
video.playsInline = true;
video.preload = "metadata";
video.src = videoUrl; video.src = videoUrl;
el.videoStage.classList.add("has-video");
el.videoStage.replaceChildren(video); el.videoStage.replaceChildren(video);
} else { } else {
el.videoStage.classList.remove("has-video");
el.videoStage.innerHTML = `<div class="mock-frame"><div class="mock-person"></div><strong>${mock ? "Mock 流程已完成" : "任务已完成"}</strong><span>${mock ? "输入客户令牌后此处展示真实视频" : "接口响应中未识别到视频 URL，请稍后重试"}</span></div>`; el.videoStage.innerHTML = `<div class="mock-frame"><div class="mock-person"></div><strong>${mock ? "Mock 流程已完成" : "任务已完成"}</strong><span>${mock ? "输入客户令牌后此处展示真实视频" : "接口响应中未识别到视频 URL，请稍后重试"}</span></div>`;
} }
updateProgress(100, "视频生成完成"); updateProgress(100, "视频生成完成");
} }
function renderGenerationError(message) { function renderGenerationError(message) {
el.videoStage.classList.remove("has-video");
const wrapper = document.createElement("div"); const wrapper = document.createElement("div");
wrapper.className = "generation-error"; wrapper.className = "generation-error";
const title = document.createElement("strong"); const title = document.createElement("strong");
@@ -1533,7 +1538,10 @@ function contextualizeGenerationError(message) {
return `${label}在视频接口中不存在。通常表示素材已失效、尚未同步，或不属于当前客户令牌。素材 ID：${assetMatch[0]}`; return `${label}在视频接口中不存在。通常表示素材已失效、尚未同步，或不属于当前客户令牌。素材 ID：${assetMatch[0]}`;
} }
function resetVideoStage() { el.videoStage.innerHTML = '<div class="mock-frame"><div class="mock-person"></div><span>Seedance 2 正在生成镜头…</span></div>'; } function resetVideoStage() {
el.videoStage.classList.remove("has-video");
el.videoStage.innerHTML = '<div class="mock-frame"><div class="mock-person"></div><span>Seedance 2 正在生成镜头…</span></div>';
}
function updateProgress(value, title) { function updateProgress(value, title) {
const safe = Math.max(0, Math.min(100, Number(value) || 0)); const safe = Math.max(0, Math.min(100, Number(value) || 0));
el.generationTitle.textContent = title; el.generationTitle.textContent = title;

4
public/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>营响力｜AI 短剧数字人 Demo</title> <title>营响力｜AI 短剧数字人 Demo</title>
<link rel="stylesheet" href="./styles.css?v=22" /> <link rel="stylesheet" href="./styles.css?v=23" />
</head> </head>
<body data-active-module="library"> <body data-active-module="library">
<header class="topbar"> <header class="topbar">
@@ -283,6 +283,6 @@
</div> </div>
<div class="toast hidden" id="toast"></div> <div class="toast hidden" id="toast"></div>
<script src="./app.js?v=27"></script> <script src="./app.js?v=28"></script>
</body> </body>
</html> </html>

5
public/styles.css
View File

@@ -221,7 +221,8 @@ hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0 0; }
.generation { margin-top: 22px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #fafbfe; } .generation { margin-top: 22px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #fafbfe; }
.video-stage { aspect-ratio: 16 / 8; max-height: 430px; background: #111827; border-radius: 11px; overflow: hidden; display: grid; place-items: center; color: white; } .video-stage { aspect-ratio: 16 / 8; max-height: 430px; background: #111827; border-radius: 11px; overflow: hidden; display: grid; place-items: center; color: white; }
.video-stage video { width: 100%; height: 100%; object-fit: contain; } .video-stage.has-video { aspect-ratio: auto; min-height: 320px; max-height: none; padding: 12px; }
.video-stage.has-video video { display: block; width: auto; max-width: 100%; height: auto; max-height: min(72vh, 760px); margin: auto; object-fit: contain; background: #111827; }
.generation-error { max-width: 620px; padding: 24px; text-align: center; } .generation-error { max-width: 620px; padding: 24px; text-align: center; }
.generation-error strong { display: block; color: #ffb8bd; font-size: 18px; } .generation-error strong { display: block; color: #ffb8bd; font-size: 18px; }
.generation-error p { margin: 10px 0 0; color: #d7deed; font-size: 13px; line-height: 1.65; } .generation-error p { margin: 10px 0 0; color: #d7deed; font-size: 13px; line-height: 1.65; }
@@ -241,7 +242,7 @@ hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0 0; }
.version-card { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfe; } .version-card { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfe; }
.version-card.selected { border-color: var(--green); background: var(--green-soft); } .version-card.selected { border-color: var(--green); background: var(--green-soft); }
.version-preview { width: 116px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #111827; color: #d6dceb; font-size: 10px; } .version-preview { width: 116px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #111827; color: #d6dceb; font-size: 10px; }
.version-preview video { width: 100%; height: 100%; object-fit: cover; } .version-preview video { width: 100%; height: 100%; object-fit: contain; background: #111827; }
.version-copy { min-width: 0; display: grid; gap: 4px; } .version-copy { min-width: 0; display: grid; gap: 4px; }
.version-copy strong { font-size: 13px; } .version-copy strong { font-size: 13px; }
.version-copy span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .version-copy span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }