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

Источник