1. 从一份 Word 稿到 142 秒竖屏视频这套流程到底解决了什么问题手里有一份写好的 Word 口播稿想把它变成一条能直接发出去的竖屏短视频这件事听起来简单做起来全是坑。我最初的想法也很朴素把稿子念一遍录下来找个剪辑软件配上字幕和背景导出完事。结果第一次尝试就卡了整整一个下午——录音环境有底噪字幕对轴对到眼花竖屏构图要重新裁切背景音乐音量忽大忽小最后导出发现分辨率不对平台压缩之后糊成一团。后来我把这件事拆开看发现它本质上是一条内容转换流水线输入是纯文本输出是带字幕、带配音、带背景、带封面的竖屏 MP4。中间要经过文本清洗、语音合成、时间轴对齐、画面渲染、音视频合成五个环节。每个环节单独看都不复杂但串起来之后任何一个环节的参数不对最终成品就会出问题。这套流程跑通之后我实测了一份 380 字左右的 Word 稿最终产出142 秒的竖屏口播视频从文本到成片全程自动化重复生产只需要替换文稿内容。这篇文章就把整条链路拆开讲清楚包括我为什么选这些工具、每个环节的关键参数怎么定、踩过哪些坑、以及怎么让这套流程稳定复现。适合谁来参考如果你是需要批量产出短视频口播内容的自媒体从业者、做知识付费需要把课程稿转成视频的老师、或者单纯想把手里的文字素材快速视频化的开发者这套方案都能直接抄作业。不需要你有专业的剪辑经验但需要你能跑命令行、能看懂基础的 HTML 和 JavaScript。核心关键词先摆出来HTML 负责画面结构edge-tts 负责语音合成Remotion 负责把画面渲染成视频帧FFmpeg 负责最终的音视频合成与格式转换Playwright 负责在需要时做页面截图或自动化校验。这五个工具各司其职组合起来就是一条完整的文本到视频的生产线。2. 整体方案设计与工具选型逻辑2.1 为什么不用剪映或 PR 这类现成工具很多人第一反应是为什么不直接用剪映剪映确实能做出很好的口播视频但它的问题在于不可编程。你没法用脚本批量替换文稿、批量生成配音、批量对齐字幕。当你只有一条视频的时候手动剪没问题当你有二十条、五十条的时候手动剪就是灾难。我需要的是一个可复现、可批量、可版本控制的流程。文稿是 Markdown 或 Word配音是脚本生成的音频文件画面是代码写的 HTML 模板最终合成是命令行完成的。这样每次生产新视频我只需要换文稿其他全部自动跑完。另一个考虑是成本。商用语音合成按字数收费一条两分钟的视频可能就要几块钱批量生产下来成本不低。而 edge-tts 是本地可调用的语音合成方案音质在口播场景下完全够用中文自然度也过得去关键是零成本、可离线、可批量。2.2 五个工具的分工与协作关系这套流程里每个工具的角色非常清晰我用一张表来说明工具负责环节输入输出edge-tts语音合成纯文本MP3 音频 时间轴信息HTML CSS画面模板文稿内容可视化的竖屏页面Remotion视频渲染HTML 组件 音频逐帧视频文件FFmpeg音视频合成视频帧 音频最终 MP4Playwright页面校验/截图HTML 页面截图或 DOM 状态这里要特别说明一下Remotion 的定位。Remotion 是一个用 React 写视频的工具它把视频的每一帧都当成一个 React 组件来渲染。这意味着你可以用写网页的方式写视频——用 CSS 控制样式用 JavaScript 控制动画用 props 传数据。对于我这种前端背景的人来说这比学 AE 的表达式要顺手得多。而Playwright在这套流程里不是必须的但在两个场景下很有用一是当你的画面模板比较复杂需要先截图确认渲染效果时二是当你想从某个网页抓取内容作为视频素材时。它的作用是把浏览器变成可控的渲染环境让你能在无头模式下拿到页面的最终视觉状态。2.3 为什么最终选择 FFmpeg 做合成Remotion 本身可以导出视频但它导出的是逐帧渲染后的结果音频和视频的合并、编码格式的转换、码率的控制还是交给 FFmpeg 更稳妥。FFmpeg 是音视频处理领域的瑞士军刀参数多但可控性强。我最终输出的竖屏视频规格是1080x192030fpsH.264 编码AAC 音频码率控制在 6Mbps 左右这个规格在主流平台上传后压缩损失最小。选 FFmpeg 还有一个原因是它能把字幕烧进视频。虽然平台支持外挂字幕但竖屏视频里字幕是视觉的一部分烧进去更可控。FFmpeg 的 subtitles 滤镜可以直接把 SRT 或 ASS 字幕文件叠加到视频上字体、大小、位置、描边都能调。3. 核心细节解析与实操要点3.1 文稿预处理从 Word 到可合成的文本Word 稿不能直接丢给语音合成里面有一堆需要清理的东西多余的空格、全角半角混用、换行符不统一、中英文标点混杂。我一般会先把 Word 内容复制到纯文本编辑器里做三件事第一统一标点。中文口播稿里的逗号、句号、问号、感叹号全部用全角英文和数字保留半角。标点直接影响语音合成的停顿节奏全角逗号的停顿时长比半角长听起来更自然。第二处理数字和英文。edge-tts 对纯数字的读法有时候会出错比如2024可能读成两千零二十四而不是二零二四。我的做法是在文稿阶段就把需要逐字读的数字写成中文比如二零二四或者在 edge-tts 的参数里指定读法。第三分段。口播稿按语义分成短段每段不超过 80 个字。太长的段落合成出来的音频节奏会拖沓而且后期对齐字幕时不好处理。分段之后每段单独合成音频再按顺序拼接这样时间轴更清晰。提示Word 里的智能引号和弯引号在复制到纯文本后经常会变成乱码建议先在 Word 里用查找替换把弯引号换成直引号再复制出来。3.2 edge-tts 的参数调优语速、音色与停顿edge-tts 的命令行调用很简单但参数调不好出来的音频会很机械。我常用的命令是这样的edge-tts --voice zh-CN-YunxiNeural --rate8% --pitch-2Hz --text 你的口播文稿内容 --write-media output.mp3 --write-subtitles output.srt几个关键参数的解释--voice中文男声我常用zh-CN-YunxiNeural女声用zh-CN-XiaoxiaoNeural。云希的音色偏年轻适合知识类口播晓晓的音色更柔和适合情感类内容。--rate8%语速加快 8%。默认语速偏慢口播视频需要稍微快一点才有节奏感。但不要超过 15%否则听起来会赶。--pitch-2Hz音调降低 2Hz。稍微降低音调会让声音更沉稳适合知识分享类内容。如果是轻松的内容可以不加这个参数。--write-subtitles这个参数会同时生成 SRT 字幕文件时间轴和音频完全对齐省去了手动对轴的麻烦。实测下来380 字的文稿用 8% 语速合成音频时长大约在 140 秒左右和最终视频的 142 秒基本吻合中间多出来的 2 秒是片头片尾的留白。3.3 HTML 画面模板的设计要点竖屏视频的画面模板用 HTML 写核心是安全区的概念。1080x1920 的画布上上下各留 250px 左右的安全边距因为很多平台会在顶部和底部叠加 UI 元素。真正的内容区域大概在 1080x1420 左右。我的模板结构大概是这样的!DOCTYPE html html langzh-CN head meta charsetUTF-8 style body { margin: 0; width: 1080px; height: 1920px; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); font-family: Noto Sans SC, sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 250px 80px; box-sizing: border-box; } .title { font-size: 72px; color: #ffffff; font-weight: 700; line-height: 1.3; text-align: center; margin-bottom: 60px; } .subtitle { font-size: 48px; color: #e0e0e0; line-height: 1.5; text-align: center; } /style /head body div classtitle主标题内容/div div classsubtitle副标题或正文内容/div /body /html这个模板的关键点在于字体大小要足够大。竖屏视频在手机上看标题字号至少 72px正文字号至少 48px否则在手机上看起来会很小。行高控制在 1.3 到 1.5 之间太密了看不清太疏了显得空。背景我用的是深色渐变因为深色背景在手机上更省电而且白色文字对比度高看起来更清晰。如果你做的是轻松内容可以用浅色背景配深色文字但要注意对比度。3.4 Remotion 的渲染配置与帧率控制Remotion 的项目初始化用npx create-videolatest选空白模板就行。核心的渲染逻辑写在src/Root.tsx和src/Composition.tsx里。Composition 的配置决定了视频的基本规格export const MyComposition () { return ( Composition idOralVideo component{OralVideo} durationInFrames{142 * 30} fps{30} width{1080} height{1920} defaultProps{{ title: 默认标题, subtitle: 默认副标题, }} / ); };durationInFrames是总帧数等于视频秒数乘以帧率。142 秒的视频30fps就是 4260 帧。这个数字要和音频时长对齐否则会出现音画不同步。Remotion 渲染命令npx remotion render OralVideo out/video.mp4 --props{title:实际标题,subtitle:实际副标题}渲染速度取决于机器性能1080x1920 的分辨率下4260 帧大概需要 3 到 5 分钟。如果觉得慢可以先把--concurrency调高利用多核 CPU 并行渲染。注意Remotion 渲染出来的视频默认没有音频音频需要在 FFmpeg 合成阶段加进去。3.5 FFmpeg 合成把画面、音频、字幕拼在一起FFmpeg 的合成命令是整个流程里参数最多的一步我把它拆成三个子步骤来做这样出错了容易定位。第一步把 Remotion 输出的无声视频和 edge-tts 生成的音频合并ffmpeg -i video_silent.mp4 -i audio.mp3 -c:v copy -c:a aac -b:a 192k -shortest output_with_audio.mp4-c:v copy表示视频流不重新编码直接复制这样速度快、画质无损。-shortest表示以较短的流为准防止音频比视频长导致最后几秒黑屏。第二步把 SRT 字幕烧进视频ffmpeg -i output_with_audio.mp4 -vf subtitlesoutput.srt:force_styleFontNameNoto Sans SC,FontSize18,PrimaryColourHFFFFFF,OutlineColourH000000,Outline2,Alignment2,MarginV120 -c:a copy output_final.mp4字幕样式参数说明FontSize18字号这个数值是相对于视频高度的比例18 在 1080x1920 下大概对应 48px 的实际字号。PrimaryColourHFFFFFF白色字体。OutlineColourH000000黑色描边。Outline2描边宽度 2px。Alignment2底部居中。MarginV120距离底部 120px避开平台底部的 UI 区域。第三步如果还需要压缩码率或转换格式可以再加一道转码ffmpeg -i output_final.mp4 -c:v libx264 -preset medium -crf 23 -c:a aac -b:a 128k -movflags faststart final.mp4-crf 23是画质和文件大小的平衡点数值越小画质越好但文件越大。-movflags faststart把元数据移到文件头部方便在线播放时快速加载。4. 完整实操流程与关键环节实现4.1 环境准备与依赖安装这套流程涉及的工具比较多我建议按顺序安装避免依赖冲突。Node.js 环境Remotion 和 Playwright 都依赖 Node.js建议用 18.x 或 20.x 的 LTS 版本。安装完之后用node -v确认版本。edge-tts这是一个 Python 包用 pip 安装pip install edge-tts安装完之后用edge-tts --list-voices可以列出所有可用音色确认中文音色存在。FFmpegWindows 用户去官网下载编译好的二进制文件解压后把bin目录加到系统 PATH 里。macOS 用户用brew install ffmpeg。安装完之后用ffmpeg -version确认。Remotion在项目目录下用npx create-videolatest初始化按提示选择模板。初始化完成后npm install安装依赖。Playwright如果只是做页面校验用npm install playwright然后npx playwright install chromium安装浏览器内核。如果安装失败通常是网络问题可以设置国内镜像源重试。提示npx playwright install失败是高频问题多数情况下是下载浏览器内核时网络中断。可以多试几次或者手动下载对应的 Chromium 版本放到缓存目录。4.2 从文稿到音频的完整操作记录我拿一份实际的 380 字文稿来演示。文稿内容是关于如何用碎片时间做知识管理的口播稿分成 6 个自然段。第一步把文稿保存为script.txt每段之间用空行分隔。第二步写一个简单的 Python 脚本批量合成音频import edge_tts import asyncio async def synthesize(text, output_file): communicate edge_tts.Communicate( text, voicezh-CN-YunxiNeural, rate8%, pitch-2Hz ) await communicate.save(output_file) async def main(): with open(script.txt, r, encodingutf-8) as f: paragraphs [p.strip() for p in f.read().split(\n\n) if p.strip()] for i, para in enumerate(paragraphs): output faudio/part_{i:02d}.mp3 await synthesize(para, output) print(f生成 {output}) asyncio.run(main())这个脚本会把每个段落单独合成一个 MP3 文件放在audio目录下。第三步用 FFmpeg 把所有音频片段拼接成一个完整音频ffmpeg -f concat -safe 0 -i audio/list.txt -c copy audio/full.mp3list.txt的内容是每个音频文件的路径格式如下file part_00.mp3 file part_01.mp3 file part_02.mp3拼接完成之后用ffprobe查看音频总时长ffprobe -v error -show_entries formatduration -of defaultnoprint_wrappers1:nokey1 audio/full.mp3实测这份 380 字的文稿合成音频总时长是141.8 秒四舍五入就是 142 秒。4.3 画面渲染与音画对齐的实操细节音频时长确定之后Remotion 的durationInFrames就定下来了142 秒乘以 30fps等于 4260 帧。画面模板我做了两个版本一个是静态标题版适合整条视频只有一个核心观点的内容另一个是分段切换版适合有多个要点的内容。分段切换版需要在 Remotion 里用useCurrentFrame和interpolate控制每段内容的出现和消失时间。import { useCurrentFrame, interpolate, AbsoluteFill } from remotion; export const OralVideo ({ segments }) { const frame useCurrentFrame(); const fps 30; return ( AbsoluteFill style{{ backgroundColor: #1a1a2e }} {segments.map((seg, index) { const startFrame seg.start * fps; const endFrame seg.end * fps; const opacity interpolate( frame, [startFrame, startFrame 15, endFrame - 15, endFrame], [0, 1, 1, 0], { extrapolateLeft: clamp, extrapolateRight: clamp } ); return ( AbsoluteFill key{index} style{{ opacity, justifyContent: center, alignItems: center, padding: 250px 80px, }} div style{{ fontSize: 72, color: #fff, textAlign: center }} {seg.text} /div /AbsoluteFill ); })} /AbsoluteFill ); };segments数组里每个元素包含text、start、end三个字段start和end是这段文字在音频中的起止秒数。这些数据可以从 edge-tts 生成的 SRT 字幕文件里解析出来。渲染命令加上 props 参数npx remotion render OralVideo out/video_silent.mp4 --props{segments:[{text:第一段内容,start:0,end:12},{text:第二段内容,start:12,end:28}]}渲染完成后用ffprobe确认视频时长和音频一致。4.4 最终合成与输出规格确认最后一步是把无声视频、音频、字幕合成到一起。我习惯把这一步写成 shell 脚本方便重复执行#!/bin/bash VIDEOout/video_silent.mp4 AUDIOaudio/full.mp3 SUBTITLEaudio/full.srt OUTPUTout/final.mp4 # 第一步合并音视频 ffmpeg -y -i $VIDEO -i $AUDIO -c:v copy -c:a aac -b:a 192k -shortest temp_with_audio.mp4 # 第二步烧录字幕 ffmpeg -y -i temp_with_audio.mp4 -vf subtitles$SUBTITLE:force_styleFontNameNoto Sans SC,FontSize18,PrimaryColourHFFFFFF,OutlineColourH000000,Outline2,Alignment2,MarginV120 -c:a copy $OUTPUT # 第三步清理临时文件 rm temp_with_audio.mp4 echo 输出完成$OUTPUT执行完之后用ffprobe检查最终文件的规格ffprobe -v error -select_streams v:0 -show_entries streamwidth,height,r_frame_rate,codec_name -of defaultnoprint_wrappers1 out/final.mp4确认输出是1080x192030fpsH.264音频是AAC 192kbps文件大小在 100MB 左右符合主流平台的上传要求。5. 常见问题与排查技巧实录5.1 音频与画面不同步的三种排查方向音画不同步是这套流程里最常见的问题表现是字幕比声音快或者慢。排查方向有三个第一检查音频总时长和视频总帧数是否匹配。用ffprobe分别查音频时长和视频时长如果音频是 141.8 秒视频是 142.0 秒那 0.2 秒的差距在可接受范围内。如果差距超过 1 秒就要检查 Remotion 的durationInFrames是不是算错了。第二检查 SRT 字幕的时间轴是否准确。edge-tts 生成的 SRT 有时候会有几毫秒的偏移如果偏移累积到后面变得明显可以手动调整 SRT 文件里的时间戳。第三检查 FFmpeg 合成时有没有用-shortest参数。如果不加这个参数音频比视频长的时候视频播完了音频还在放最后就是黑屏加声音。5.2 edge-tts 合成失败的常见原因edge-tts 偶尔会合成失败报错信息通常是网络超时或者音色不存在。我遇到过的原因和解决方法问题现象可能原因解决方法报错 voice not found音色名称拼写错误用edge-tts --list-voices确认准确名称合成到一半中断网络不稳定分段合成每段单独重试音频有杂音或断句奇怪文本里有特殊字符清理文本去掉 emoji 和特殊符号合成速度极慢单次文本太长把长文本拆成 80 字以内的短段提示edge-tts 是调用在线服务的所以需要网络连接。如果网络环境不稳定建议把文稿拆成更小的段每段单独合成失败的那段单独重试不用全部重来。5.3 Remotion 渲染报错与性能优化Remotion 渲染报错最常见的是内存不足和字体缺失。内存不足的表现是渲染到一半进程被 kill解决方法是降低--concurrency参数减少并行渲染的帧数。字体缺失的表现是画面上的文字变成方块解决方法是在项目里引入字体文件或者在 CSS 里用系统自带的中文字体。性能优化方面我实测下来有几个有效的做法把--concurrency设置为 CPU 核心数的 70% 左右不要拉满留出余量给系统。画面里的动画尽量用 CSS transform 和 opacity这两个属性可以被 GPU 加速。如果画面是静态的不需要逐帧渲染可以用 Remotion 的--frames参数只渲染关键帧然后用 FFmpeg 补帧。5.4 FFmpeg 字幕烧录的字体与位置问题FFmpeg 烧录字幕时如果系统里没有指定的字体字幕会显示成默认字体可能和设计稿不一致。解决方法是在force_style里用系统确实存在的字体名称或者在系统里安装对应的字体文件。字幕位置的问题主要是MarginV参数。这个参数控制字幕距离底部的距离单位是像素。竖屏视频里底部通常有平台的 UI 遮挡所以MarginV建议设置在 100 到 150 之间。如果字幕被裁切了检查一下视频的高度和字幕的Alignment设置是否匹配。还有一个细节是字幕的换行。FFmpeg 默认不会自动换行长句子会超出画面。解决方法是在 SRT 文件里手动插入换行符或者用force_style里的WrapStyle参数控制换行方式。6. 这套流程的扩展玩法与个人经验6.1 批量生产的目录结构与脚本组织当你要生产多条视频时目录结构很重要。我用的结构是这样的project/ ├── scripts/ │ ├── synthesize.py │ ├── render.sh │ └── compose.sh ├── templates/ │ └── oral_video.html ├── contents/ │ ├── video_001/ │ │ ├── script.txt │ │ ├── audio/ │ │ └── output/ │ └── video_002/ │ ├── script.txt │ ├── audio/ │ └── output/ └── remotion-project/ └── src/每条视频一个独立目录文稿、音频、输出都在自己的目录里互不干扰。脚本放在scripts目录下通过参数传入视频目录路径这样一套脚本可以处理所有视频。6.2 用 Playwright 做画面预览与自动化校验Playwright 在这套流程里最大的价值是在渲染之前先看效果。Remotion 渲染一次要几分钟如果画面有问题重渲染的成本很高。用 Playwright 先把 HTML 模板在浏览器里打开截图确认布局、字体、颜色都对了再去渲染能省很多时间。const { chromium } require(playwright); (async () { const browser await chromium.launch(); const page await browser.newPage({ viewport: { width: 1080, height: 1920 }, }); await page.goto(file:///path/to/template.html); await page.screenshot({ path: preview.png, fullPage: true }); await browser.close(); })();这段脚本会把 HTML 模板渲染成 1080x1920 的截图你可以直接看到最终画面的效果。如果截图没问题再去跑 Remotion 渲染心里有底。6.3 我踩过的坑与实操心得第一个坑是音频采样率不一致。edge-tts 输出的 MP3 默认是 24kHz 采样率而 Remotion 渲染的视频音频轨道是 48kHz。直接合并的时候FFmpeg 会自动重采样但有时候会出现轻微的音频失真。我的做法是在合成之前先用 FFmpeg 把音频统一转成 48kHzffmpeg -i audio/full.mp3 -ar 48000 -ac 2 audio/full_48k.mp3第二个坑是字幕文件编码。edge-tts 生成的 SRT 文件默认是 UTF-8 编码但有些播放器或平台对 BOM 头敏感带 BOM 的 SRT 会导致字幕显示乱码。解决方法是用sed去掉 BOM 头或者用 Python 重新写一遍文件。第三个坑是Remotion 的字体加载。Remotion 在渲染时是在 Node.js 环境里跑的不是浏览器环境所以 CSS 里的font-family如果引用的是系统字体可能加载不到。解决方法是在 Remotion 项目里用remotion/google-fonts加载网络字体或者把字体文件打包进项目里用font-face引入。第四个坑是FFmpeg 的-shortest参数。这个参数在音视频时长接近的时候很好用但如果音频比视频短很多视频会被截断。我的做法是先确认音频和视频的时长差在 0.5 秒以内再用-shortest否则手动指定-t参数控制输出时长。6.4 后续可以继续优化的方向这套流程目前跑通了但还有几个可以优化的点。一是画面模板的多样化现在只有标题和正文两种布局可以增加图文混排、数据图表、引用卡片等模板让视频的视觉更丰富。二是背景音乐的自动混音现在背景音乐是手动加的可以写一个脚本根据音频的节奏自动匹配背景音乐的淡入淡出。三是多语言支持edge-tts 支持多种语言只要替换音色和文稿同一套流程可以生产英文、日文等其他语言的视频。我个人在实际操作中的体会是这套流程最大的价值不是省了多少时间而是把创作和制作分离了。你只需要专注于写文稿剩下的全部交给脚本。文稿改一个字重新跑一遍流程两分钟后新视频就出来了。这种迭代速度是手动剪辑完全做不到的。