AI 短剧的字幕不能随便铺：做一个可检查的竖屏预览层

原创于 2026-10-26 21:30:56 发布 · 311 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

界面动效与视觉编程

本文聚焦竖屏短剧字幕布局的可验证性，提出基于源画面坐标统一的矩形碰撞检测方案，避免字幕遮挡嘴型、关键线索及UI控件。强调WebVTT时间对齐与几何布局分离，安全区配置需项目级可追溯，审阅结果须支持帧级定位与修改留痕。指出requestVideoFrameCallback存在时序偏差，导出同步需独立验证，并明确预览层仅覆盖几何检查，不替代真实渲染与WCAG可访问性评估。

封面：折纸人物电影框与审阅纸卡的概念构图

竖屏短剧里，一句字幕可能同时压住嘴型、衣服上的线索和底部播放按钮。生成出视频不等于审片完成；字幕是否可读、人物表情有没有被挡住，是预览页应该暴露的问题。

Gemini Omni 文档提供了视频生成相关流程，但本文没有调用模型，也不评价其中文对白准确率。这里使用人工标注的画面区域，把“字幕放哪里”做成可以检查的布局决策。WebVTT 负责时间对齐文本轨，不会自动理解人物表情，更不会替你制定平台安全区。

先统一坐标，再谈遮挡

假设源画面是 360×640。所有区域都用源画面坐标记录，不能把播放器 CSS 像素与视频像素混算。若 object-fit 使用 contain，要先计算黑边偏移；若使用 cover，裁掉的区域也必须反映到映射里。下面只验证源坐标中的矩形关系，不涉及自动人脸识别。

教学配置把字幕带限定在安全区域内，再检查它与人工标注的重要区域是否相交。安全区域是项目约定，不是通用平台规范；不同投放渠道应提供各自可追溯的配置。

import assert from 'node:assert/strict';
const safe = {x:18,y:32,w:324,h:560};
function valid(r) {
  return Object.values(r).every(Number.isFinite) && r.w > 0 && r.h > 0;
}
function inside(a, b) {
  return a.x >= b.x && a.y >= b.y &&
    a.x+a.w <= b.x+b.w && a.y+a.h <= b.y+b.h;
}
function overlap(a, b) {
  return a.x < b.x+b.w && a.x+a.w > b.x &&
    a.y < b.y+b.h && a.y+a.h > b.y;
}
function inspect(band, important) {
  if (!valid(band) || important.some(r => !valid(r))) throw Error('rectangle');
  return {
    outsideSafe: !inside(band, safe),
    overlaps: important.flatMap((r,i) => overlap(band,r) ? [i] : [])
  };
}
const face = {x:100,y:180,w:120,h:140};
assert.deepEqual(inspect({x:30,y:500,w:300,h:60},[face]),
  {outsideSafe:false,overlaps:[]});
assert.deepEqual(inspect({x:30,y:260,w:300,h:60},[face]).overlaps,[0]);
assert.equal(inspect({x:30,y:570,w:300,h:60},[]).outsideSafe,true);
assert.throws(() => inspect({x:0,y:0,w:NaN,h:20},[]), /rectangle/);
console.log('source-space subtitle bounds and manual region overlap checked');