一、前言逛GitHub的时候无意间发现了一个很有意思的项目——Remotion它最特别的地方就是能靠React编程来生成视频。它允许开发者借助Web技术像CSS、Canvas、SVG、WebGL这些再加上React本身的强大功能来动态制作视频内容。这个项目目前已经收获了37.5k星标我看了GitHub上项目介绍里附带的演示视频整体效果还不错就想着自己上手实操感受一下。image.png二、安装Remotion的安装过程挺简单的只要电脑上装了Node.js环境不用额外做复杂配置输一行简单的命令就能完成安装npx create-videolatestimage.png三、使用从安装完成后的提示能看出来Remotion已经集成在了Claude Code、Cursor、Gemini等好几款AI工具里。这些AI工具里我平时用得最顺手的就是Claude Code所以这次就直接用它来测试看看Remotion实际生成视频的效果到底怎么样。我直接在Claude Code里输入了我的需求提示词具体截图如下image.png很快Claude Code就生成了详细的计划任务步骤分得很清晰大家可以看看image.pngimage.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的开发者不用切换到专业视频剪辑软件全程用代码就能控制视频内容。虽然这次测试的视频效果一般但只要花时间优化画面、完善流程相信能做出更优质的视频也希望我这次的实操经历能给有类似需求的朋友提供一点参考。效果视频