实现纯web视频编辑工具 fly

fly-使用webcodecs实现的web端视频编辑工具，类似于剪影Web版。

fly-cut支持文本导入，图片（静态图片，动图）、编辑音频和视频，然后合成导出视频；并且所有功能都不依赖于后端，ffmpeg也没有引入.wasm，所有这些都是由浏览器的原始接口实现的。

有兴趣的朋友可以查看在线Demo，并关注项目。

本项目依靠WebAV࿰处理音视频素材和视频合成导出功能c;WebAV基于WebCodecss 处理浏览器中的音频和视频数据，合理包装Webcodecs，简化了音视频数据的处理过程。

感谢CCLIP项目，CClip࿱是本项目最早的fork。b;比较CClip�本项目视频处理的功能由ffmpeg替换为WebAV，与此同时，大量更改代码，部分删除和增加功能。

功能介绍。

编辑器主要分为材料栏、顶部操作栏、画布、属性栏和时间轴b;让我们详细解释一下这些部分。

素材栏。

现在支持的材料包括文本、图片和xff08;静态图片，动图）、音频，视频。

文本材料暂时只支持简单的文本尺寸、字体、填充颜色、描述颜色、文本框颜色属性。

图片支持静态图片和动图。

音频支持所有音频格式。

使用mp4box视频.js解封视频，因此，mp4box暂时只支持.视频格式js可以处理。

画布和预览。

画布是用来编辑可视化素材和预览视频的，用户可以选择相应的画布层，然后可视化操作层；点击播放按钮󿀌用户可以在画布中预览视频内容。

属性栏。

现有属性栏支持材料基本属性的修改，如缩放比，图层位置，对应的材料也有其独特的属性，目前阶段的属性还不是很完整c;更多属性配置将在后期得到支持。

时间轴。

画布和属性栏是修改合成视频关键帧内容，可以理解为对点修改，时间轴可以看作是对线处理，合成视频的起止位置决定了片段；文本和图片，可随意拖动片段长度，音频和视频󿼌时长属性࿰本身存在c;所以长度不能超过原来的长度，拖动切割可以进行。

原理。

原理

视频编辑器涉及的内容其实很多，它包括如何绘制视频关键帧、获取视频关键帧、获取材料信息、视频合成等b;由于篇幅有限，不一一解释，主要讲解从分析视频到合成输出视频的过程。

如果不了解音视频处理，对这个过程会很陌生󿀌我们可以用接收快递的例子来帮助理解；

每天996�你的屁股受不了，所以你决定在网上买一把椅子：视频文件。相当于你从快递员那里收到的邮寄包，有包装，椅子也是零件，不能直接使用；首先，你需要打开快递包装󿀌这一步相当于。视频解封装。

，您可能会以不同的方式拆卸不同的快递包装，不同的视频格式也可能有不同的编码格式，还需要不同的解封方法。拆开包装后，您可以获得椅子的零件，#xfff0需要组装c;࿱可以使用b;解开包装视频文件后，您就可以获取了。编码视频数据。，需要进行。解码。

，只有获取原始视频数据，才能使用。

最后，你坐在新椅子上，公司业绩下降󿀌你被裁员，您决定退货：组装好的椅子不容易教，您需要将其拆解为零件；原始视频数据不利于࿰的传输c;你需要这样做。编码。

。

邮寄包裹你不能直接运输零件，您还需要包装零件；您还需要包装编码视频数据，生成视频文件󿀌然后可以发给别人。

在这个过程中，WebCodecs负责编解码，即组装和拆卸零件的过程；在WebAV中，mp4box被用来解封视频.js处理。

规划。

1. 目前项目刚刚上线，还有很多不完善的地方，欢迎您提到issue；计划中还有一些功能：
2. 支持更多属性。
3. 支持更多的材料类型，例如，过滤器，过渡。
4. 国际化。