One HTML file, three platform formats — rendering video without an editor

说明与用途

自动化脚本可将单个 HTML 动画渲染为三种平台专用视频，消除手动导出并保证布局和时长一致。

问题

Re‑exporting a single HTML animation to multiple platform‑specific video sizes requires four manual exports and checks, leading to version drift and errors.

结果

The automation recipe produces platform‑specific videos from a single HTML source, ensuring consistent layout, correct aspect ratios, and accurate duration handling.

工作流

• 1. Prepare an HTML animation that uses viewport‑relative sizing.
• 2. Run node scripts/render-video-seek.js chart.html --duration=8 --presets=douyin,xiaohongshu,square --out=dist/chart.mp4
• 3. The script outputs three files: dist/chart-douyin.mp4, dist/chart-xiaohongshu.mp4, and dist/chart-square.mp4 with their respective resolutions.
• 4. Optionally, include audio with --audio and control duration with --duration or --audio-fit=pad.
• 5. For automated pipelines, add --json to receive a JSON summary on stdout.

证据

Open the editor. Set the sequence to 9:16. Export. Re-check the text isn't clipped.

来源

node scripts/render-video-seek.js chart.html --duration=8 \
--presets=douyin,xiaohongshu,square --out=dist/chart.mp4

来源

The script outputs three files: dist/chart-douyin.mp4, dist/chart-xiaohongshu.mp4, and dist/chart-square.mp4

来源