一、前言
逛GitHub的时候，无意间发现了一个很有意思的项目------Remotion，它最特别的地方就是能靠React编程来生成视频。它允许开发者借助Web技术（像CSS、Canvas、SVG、WebGL这些），再加上React本身的强大功能，来动态制作视频内容。这个项目目前已经收获了37.5k星标，我看了GitHub上项目介绍里附带的演示视频，整体效果还不错，就想着自己上手实操感受一下。
image.png
二、安装
Remotion的安装过程挺简单的，只要电脑上装了Node.js环境，不用额外做复杂配置，输一行简单的命令就能完成安装：
npx create-video@latest
image.png
三、使用
从安装完成后的提示能看出来，Remotion已经集成在了Claude Code、Cursor、Gemini等好几款AI工具里。这些AI工具里，我平时用得最顺手的就是Claude Code，所以这次就直接用它来测试，看看Remotion实际生成视频的效果到底怎么样。
我直接在Claude Code里输入了我的需求提示词，具体截图如下：
image.png
很快，Claude Code就生成了详细的计划任务，步骤分得很清晰，大家可以看看：
image.png 
image.png
这次我没打算搞复杂的测试，主要就是想看看它生成视频的基础效果，所以全程都在尽量降低操作成本。按照Claude Code给出的默认计划，生成音频和图片都需要调用AI，而且默认用的是OpenAI，对我来说不仅不方便，还没必要额外增加成本，所以就想着换一种更省事的方式。
音频方面，我最终选择了edge-tts，它最大的好处就是免费，而且生成速度还挺快。我让Claude Code帮我写了一个生成语音的脚本，自己调用之后，没等多久，各个章节的MP3音频文件就自动生成好了，省了不少功夫。
image.png
图片这块我也简化了操作，虽然即梦、文心一言、豆包这些工具都能在线生成图片，但大多没有便捷的API接口，集成起来太麻烦。索性偷个懒，直接在PPT里用ASCII插图的方式制作画面，然后围绕PPT的内容搭建视频框架，再添加一些简单的字幕，这样既省事，也能满足这次简单测试的需求。
前后折腾了几个小时，最终生成了一段24分钟的视频。说实话，视频效果确实很一般，毕竟只是简化版的测试，没有做复杂的画面设计和特效。但不可否认，Remotion也有它的优势，只要结合Claude Code，就能做成一个自动生成视频的技能，以后再想做统一风格的讲解类视频，就能更便捷高效地完成了。
另外还有一个小细节值得跟大家提一下，Remotion在使用过程中，会自动生成一个React项目，通过npm运行这个项目后，会出现一个类似视频编辑软件的界面，可以点击播放来测试视频效果。这里要注意的是，这个测试界面播放视频的时候是没有声音的，但最终合成导出的视频是有声音的，我当初因为这个小问题，还折腾了好一会儿才弄明白，也算是一个实操小坑，分享给大家避坑。
image.png
总的来说，这次Remotion的实操体验不算完美，但也超出了我的基础预期。它的核心优势在于结合Web开发技术和AI工具，能实现视频的便捷生成，尤其适合会React的开发者，不用切换到专业视频剪辑软件，全程用代码就能控制视频内容。虽然这次测试的视频效果一般，但只要花时间优化画面、完善流程，相信能做出更优质的视频，也希望我这次的实操经历，能给有类似需求的朋友提供一点参考。
效果视频：