Opus 5.5 横屏产品视频怎么改成竖屏？重新排版，而不是只改比例

有用的竖屏剪辑改变的是布局，而不只是宽高比。 在 Opus 5.5/Remotion 项目中，保留故事和原始素材，然后在新的竖屏合成里重新安排标题、截图和字幕。围绕观众需要看的部分裁切真实界面；不要把桌面画面硬塞进手机形状的框里。

本教程把一段 30 秒的产品概览从 1280 × 720 转换为 720 × 1280，附带两个实际导出文件和一个可编辑项目。新增的工作在于截图取景、文字摆放和输出检查；更完整的代码到 MP4 工作流见 Opus 视频主指南。

对比两个实际导出版本

观看或下载带旁白的横屏版本，再与竖屏剪辑对比：

Remotion 实际渲染：720 × 1280，30 fps，900 个视频帧。英文参考旁白和句子字幕与横屏版共用。这是公开页面的概览，不是完成 API 请求的录屏。

获取 完整项目 和 竖屏 MP4。压缩包保留了真实的 1280 × 720 原始截图和最终裁切坐标，方便你检查和修改整个转换过程。

我们在官方 Claude Code 中实际调用了 claude-opus-5-5 来生成最初的 React/Remotion 源码。那次调用收到的是文字形式的素材描述和尺寸，而不是截图像素。我们提供了真实图片，审阅输出，做了编辑修正并在本地渲染。这个 MP4 不是 Opus 直接输出的，参考语音则是另行用 eSpeak NG 生成的。

选择重新排版、裁切还是重新截取

横屏截图有足够的水平空间，能同时展示导航、页面主体和侧边栏。竖屏画面通常无法在保持可读尺寸的同时保留这三者。先决定哪一部分能支撑这句话，再决定放大多少。

我们的竖屏剪辑结合了重新排版和真实裁切，并不声称展示了网站的移动端布局。文档画面变成其左侧介绍部分的近景；API 画面保留了主要概览和表格。原始截图保持不变。

截图做演示教程 解释了这些素材是如何挑选的。如果你有真实的移动端界面，直接截取它可能比放大桌面区域更好。那将是另一份原始素材，因此请单独记录其 URL、视口和截取时间。

一个故事，两个合成

运行项目前先安装 Node.js 和 npm。下文可选的终端媒体检查还需要另行 安装 FFmpeg（包括 ffprobe）；npm ci 不会安装这个命令行工具。不使用这些可选检查命令，也可以通过项目自带的 npm 脚本完成渲染。

从下载的项目开始：

npm ci
npm start

依次选择 DemoNarrated 和 DemoPortrait。两者使用相同的场景区间、图片和旁白时间表，只有 layout 属性不同。这样对比才有意义：观众能看清什么的变化来自布局和裁切，而不是换了一份脚本。

需要纯画面导出时，保留无声的 DemoLandscape 合成。它是压缩包中的第三个交付物，而不是另一套分镜。

在 src/index.tsx 中，SCENES 负责第 4、11、18 和 25 秒的切点。Root 注册合成尺寸。Demo 选择布局，而 ShotScene 决定每张图片放在哪里。只修改 Root，大部分实际的设计工作仍未完成。

用真实像素定义竖屏布局

我们的竖屏合成预留了 x=48 到 x=672 的水平区域。这在 720 像素宽的画布两侧各留出 48 像素，截图宽度为 624 像素。主要内容从 y=110 附近开始。截图从 y=330 开始，章节行位于 y=860，字幕框占据 y=936 到 y=1060。

这些是本项目的设计坐标，不是适用于所有社交应用的官方通用安全区。不同平台的按钮、描述文字和设备边框各不相同。发布前请检查目标平台当前的预览；本教程的本地测试不是平台上传测试。

本地真实预览。截图的取景与标题、字幕相互独立。界面和示例视频均为英文；图片未经改写来模拟其他语言。

标题可以换成两行，而不会把截图挤进字幕区。这对画面标题 “Find the documentation”（查找文档）很重要，它比 “Explore the catalog”（浏览目录）占用更多空间。换成其他标题时，请检查实际换行后的高度，不要以为字号相同就意味着文字块高度相同。

API 裁切是这个版本中最高的图片。其高度约为 479.3 像素，因此在 y=809.3 左右结束。截图标签大约从其下方 22 像素处开始。这里距离章节行已经没有多少余量，所以不要随意增加图片高度或标签字号，改动后必须重新检查该场景。

计算裁切，不让界面变形

裁切需要四个源图坐标：x、y、宽度和高度。缩放则两个轴只用一个系数。最终的源图裁切如下：

所有裁切都在原始 1280 × 720 文件的范围内。目录裁切有意排除了下方会变动的价格区域。文档和 API 裁切保留的是真实像素，没有重建文字或控件。

对于显示宽度 W 和裁切 (x, y, w, h)，使用：

scale（缩放系数） = W / w
视口高度 = h × scale
图片宽度 = 源图宽度 × scale
图片高度 = 源图高度 × scale
图片左偏移 = -x × scale
图片上偏移 = -y × scale

对于 API 场景，624 / 690 ≈ 0.90435，530 × 0.90435 ≈ 479.3。图片在 overflow: hidden 视口之后按相应的负偏移移动。其宽度和高度仍使用同一个系数，因此圆形保持圆形，文字不会被拉伸。

这里有一个实际限制：放大裁切区域无法恢复原始截图中本就没有的细节。在我们的文档裁切中，580 个源图像素被显示在 624 个输出像素上。这种轻微放大可以从源图计算中看出；它并不是重新截取的更高分辨率页面。如果细小文字是教程的核心，请以合适的分辨率截取相关区域，并在手机显示尺寸下再次测试。

第一次渲染后改了什么

模型最初的输出把完整的文档和 API 截图直接放进了竖屏布局。渲染是成功的，但大部分界面太小，没有实用价值。我们保留了场景顺序，并引入了上面列出的两处源图裁切。这是初版和最终版竖屏剪辑在视觉上的主要区别。

我们还删除了字幕上的两行 CSS 截断。截断能让文本框看起来整齐，却可能丢掉后面的词。更稳妥的做法是让过长的字幕在审阅时被发现，再有意识地缩短、拆分或给予更多空间。提供的英文句子能放进已检查的版本；替换句子后需要重新检查。

最后，字幕现在来自参考音频脚本生成的 src/captions.json，经过帧取整后，会在句子开始时或稍早出现。配音与字幕教程 解释了这个时间表及其有意保留的阅读停留时间。本项目使用的是句子字幕，而不是卡拉 OK 式的逐词对齐。

不要原封不动地沿用每个横屏设计元素。在横屏版中，文档和 API 的标题位于完整截图下方的共享色带中。在竖屏中，标题、截图、截图标签、章节行和字幕各自占据不同的垂直位置。这是用同一个故事做出的不同构图。

让 Opus 做可审核的竖屏改编

可以把下面这段作为你项目的改编提示词。它描述的是我们认为有用的约束，并不代表我们运行过所有可能的变体。

为这个现有的 Remotion 项目添加一个竖屏合成。
保留横屏合成和已确认的原始素材。
目标：720x1280，30 fps，场景边界和总帧数保持不变。

把标题、截图和字幕排列为彼此独立的垂直区块。
使用以下源图裁切：[每张已确认图片的 x、y、宽度、高度]。
图片宽度和高度保持同一个缩放系数。
绝不重绘界面，也不修改截图中的标签。

本项目的设计边界：x=48..672；重要内容 y=90..1080。
这些是项目边距，并不代表任何平台的安全区。
使用独立的字幕色带；绝不用行数截断（line-clamping）隐藏溢出。
不要虚构逐词时间戳，也不要悄悄缩短配音。

返回修改过的文件、裁切计算和需要检查的帧。
标出标题、截图标签或字幕已经放不下的任何场景。

模型提出裁切方案时，要对照真实素材核实。视觉上好看的区域，可能恰好漏掉了让画面可以理解的那个标签。模型建议缩小字号时，要按预期的观看尺寸检查。验收的标准是观众能否理解预期的信息，而不是每个元素在技术上是否都放进了画布。

检查所有场景，再导出两个版本

拖到有代表性的帧，例如第 150、390 和 600 帧，分别对应目录、文档和 API 场景。开场和结尾也要检查；即使每个产品场景都通过，较长的结尾目的地文字仍可能溢出。

用 Remotion Studio 中可见的帧选择器，在两个合成中检查同一时刻。查看页面是否可辨认、字幕文本是否完整、裁切边缘、标题换行以及截图标签周围的空间。检查转场的开始和结束，避免弹簧动画或镜头移动把内容推出预定区域。

npm run render:narrated
npm run render:portrait
ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate,nb_frames \
  -show_entries format=duration -of json out/portrait.mp4

竖屏视频的预期视频流为 H.264、720 × 1280、30 fps、900 个视频帧。其 AAC 音轨在 30 秒画面时间线之后可能带有少量编码尾部。请比较实际的句子时间，而不只是看容器四舍五入后的时长。

我们的检查使用的是本地浏览器预览和渲染出的文件，不是真机测试或社交平台发布测试。正式投放前，请按受众实际看到的尺寸查看最终导出，并检查上传后的版本。本文有五个语种的本地化版本，并不意味着制作了五个单独本地化的视频。

交付一对可编辑的格式

用清晰的名称保存两个导出文件，保留与之匹配的源项目，并记录任何针对特定平台的布局改动。这样以后更新字幕或产品界面时都有据可查。如果替换了旁白，两种布局都要重新评估：横屏能放下的句子，在竖屏中可能需要不同的断行。

Opus 5.5 模型页 与生成或修改项目代码相关。我们记录的调用使用的是官方 Claude Code；本地渲染器和参考语音引擎是独立的工具。本例不能证明 Ofox 提供一键竖屏编辑器。

完整的制作流程请回到 Opus 视频主指南。如果源故事需要调整，请看 产品演示教程；如果新格式暴露了时间问题，请看 音频/字幕教程。把这些任务分开处理，每次修改都更容易验证。