DEV Community · Show DEV8/9 06:2459 分
用Agent生成产品视频：HTML转MP4实践
I asked an agent to make a product video. It wrote HTML and rendered an MP4 - Dota Companion
开发者使用HeyGen开源的HyperFrames框架，将HTML/CSS转换为MP4视频，用于Chrome扩展的推广和演示。该框架无需构建步骤，通过数据属性控制时间轴，GSAP实现动画，headless Chrome逐帧渲染，FFmpeg编码。作者强调纯HTML文件便于Agent编辑，并分享了三个耗时点：CDN资源未加载导致动画缺失（需本地化所有依赖）、先写故事板再生成配音导致音画不同步（应先生成音频再计算剪辑点）、以及静默渲染后混流。视频渲染数据：1080×1080，867帧，56秒完成，通过WCAG AA对比度检查。