最近开发了一款网页版的视频剪辑工具，交互异常复杂，肝了很多个日日夜夜！终于可以公测了，欢迎大家使用！下面是工具的介绍以及使用说明，除了强大还是强大，基础功能目前已经完善，接下来就是加入AI功能了，编辑器基于react + typescript + webgl开发，相信未来会有越来越多的C/S架构应用转成B/S架构，前端并未死，只是淘汰了一部分初级的研发工程师！
编辑器概要
无界云剪基于浏览器开发，无需下载安装，只需要打开浏览器输入网址（video.h5ds.com）即可访问，需要使用高版本的谷歌浏览器，谷歌内核需要96版本以上，如果没有最新版的浏览器请先在官方下载安装。以下是软件的使用说明，如有疑问或者BUG，请及时与我们联系修复，感谢！
界面说明
红色部分：素材资源区域，主要管理系统和用户自己上传的素材
绿色部分：画布区域，用于预览视频编辑结果，可以选中元素进行缩放，旋转，移动等操作
紫色部分：元素设置区域，选中元素之后会显示对应的参数设置选项，可以修改元素的细节参数
黄色部分：时间轴区域，可以拖动游标预览指定时间刻度的画面，快捷操作可以进行元素的分割、音视频分离、裁剪、关键帧动画添加等功能。
素材上传
点击红色区域可以进行素材上传操作，最大文件限制500M，资源格式支持如下：
视频格式：mp4、mov；
音频格式：mp3、aac、wav、mpeg；
图片格式：gif、jpg、png、svg;
素材管理
素材分"当前项目素材"和"全部素材"，每个项目的素材都可以在"全部素材"中找到，上传的素材会默认存放到"当前项目素材"中进行管理。勾选素材可以进行批量删除。
在线录音
点击按钮旁的下拉选项可以进行在线录音操作，如果电脑接入了第二个显示器，录音功能可能无法正常使用，请使用外接麦克风或者拔掉一个显示器进行录音，录音完成后点击上传即可。
添加元素到时间轴
点击添加按钮或者直接点击鼠标左键拖动元素到时间轴。
将元素直接拖入到时间轴也可以添加元素，拖入的时候鼠标放开的位置对应的时间刻度就是元素开始的时间。
素材介绍
系统素材是指系统管理员添加的预设素材资源，工具使用者都可以使用。
视频
点击黄色的心可以收藏素材，点击蓝色的按钮可以快速将素材添加到时间轴。
收藏的素材可以点击分类中的"心图标"进行查看
图片
图片素材功能和视频素材类似，支持搜索，分类，收藏
音频
音频素材可以点击播放图标进行试听，绿色部分表示当前播放的进度，鼠标在音频素材中移动会出现一个白色的线条，点击后可以修改播放进度。
文本
系统预设了一些文本样式，文本素材支持搜索，分类，收藏
贴纸
贴纸是一些小动画，鼠标放在贴纸上面可以预览动画效果。贴纸动画本质上是lottie动画（Adobe After Effects动画）。
滤镜
系统提供了海量的专业滤镜效果，滤镜的效果作用于整个画面。
特效
特效区别于滤镜，特效是一个可以变化特殊效果，作用于整个画面，比如马赛克，阳光，旧电视等效果，特效由官方维护，后续会陆续添加更多的特效效果。
转场
转场效果必须添加到两个图片、视频元素之间，且两个元素必须相接，将滤镜效果拖到两个元素之间即可，转场的效果是作用于整个画面的。
时间轴操作
快捷功能说明
时间轴的顶部有快捷操作功能，当我们选中元素的时候，会高亮可操作的快捷功能。从左到右依次是：元素分割、镜像翻转、复制元素、音视频分离（有声视频）、删除元素、裁剪尺寸（图片或者视频）、添加字幕、背景颜色、关键帧动画、删除关键帧
元素分割：选中元素后，将游标拖动到元素中间，点击分割按钮"]|["或者使用快捷键ctrl + B 可以将元素分割成两段。
镜像翻转
将元素进行左右镜像翻转，如需上下翻转可以设置元素的旋转角度为180度。
复制元素
选中元素后可以点击复制按钮将元素复制。
音视频分离
当我们选中有声音的视频元素可以进行该操作，会将视频的音频和画面进行分离。
删除元素
选中元素后点击删除可以快速删除轨道中的元素。
裁剪尺寸
图片或者视频元素可进行尺寸裁剪。
字幕元素
字幕元素区别于文字元素，字幕元素的样式是统一的，修改一个字幕元素的样式，全部字幕样式都会被修改。字幕元素不可以拖动到其他元素下面，只能显示在最顶部。
背景颜色
背景颜色是指整个画布的背景色，点击背景按钮后右侧会出现背景选项，可以自定义背景颜色，或者点击预设颜色快速设置。
关键帧动画
关键帧动画只适用于 文字、视频、图片、贴纸。选中元素并让游标在元素区间内，点击关键帧按钮可以给元素当前的状态（位置、大小、旋转角度、透明度、遮罩样式）添加一个关键帧，将游标移动到其他位置，重新设置元素的样式可以自动添加一个新的关键帧，两个状态会自动添加渐补动画。关键帧反馈在时间轴上是一个白色的小点，表示在该位置有一个关键帧状态。
时间轴交互
时间轴元素层级
时间轴上的元素可以拖动排序，上面的元素会挡住下面的元素。
时间轴视频裁剪
元素的前面和后面都可以进行拖动，拖动前面表示对视频的前半段进行裁剪，拖动后面的按钮表示对视频的后半段进行裁剪，因为视频的时长是固定的，所以视频的裁剪长度是有限制的，其他元素没有长度限制。
时间轴自动吸附
当一个轨道上有多个元素的时候，元素之间有间隙，我们可以点击吸附按钮对元素进行快速的吸附。
时间轴缩放
当我们的元素太多太长的时候，我们可以通过缩放操作对时间轴进行缩放操作。
隐藏&锁定
点击轨道的小眼睛可以隐藏该轨道，点击小锁可以锁定轨道，元素被锁定后将无法被鼠标选中。
视图操作
预览区域也可以进行元素的操作，比如修改元素大小，位置，旋转角度。
控制器说明
控制器支持单选和框选，点击一个元素可以选中该元素，框选一个区域可以将该区域中所有的元素都选中。控制器有5个控制点。分别控制大小和旋转角度。
画面尺寸切换
支持多种比例的视频尺寸，切换后会做自动适配处理。
播放&暂停
可以点击播放&暂停按钮进行播放控制，也可以点击空格键进行播放暂停切换，点击元素的时候会自动暂停播放。
参数设置
参数设置是指元素设置区域的设置，不同的元素参数设置不同，下面会具体标注出参数设置组件被哪个元素使用。
位置
支持元素：图片、视频、文本、贴纸。
元素位置中的x,y是元素中心点相对画布中心点的坐标，中心点坐标是[0,0]。
大小&缩放
支持元素：图片、视频、贴纸。
大小和缩放操作都会修改元素的尺寸，取消选中元素后，缩放的参考值将重新设置。
透明度
支持元素：图片、视频、贴纸、文本。
元素的透明度设置。
旋转角度
支持元素：图片、视频、贴纸、文本。
元素的旋转是相对中心点进行旋转的
绿幕抠图
支持元素：图片、视频。
你可以去购买一些绿幕素材上传到素材库中，拖入到时间轴，开启绿幕抠像即可，绿幕抠图有三种类型可以选择：绿色、混合、纯色。不同的绿幕素材颜色可能不一样，我们可以通过微调颜色查看抠的效果。使用纯色抠图可以扣去指定的颜色，比如红色，蓝色等。
叠加模式
支持元素：图片。
叠加模式是指和背景图片通过算法作用的叠加效果，具体效果可以参考下图。
正常
线性减淡
正片叠底
滤色
底片
移除背景
当我们使用PNG透明背景的图片，可以使用该功能移除掉透明层的背景，使用黑色覆盖
反向蒙版
移除PNG图片中有颜色的部分，保留无颜色的部分
正向蒙版
将PNG图片中有颜色的部分使用黑色取代
动画参数
动画分三种动画，进入动画，过程动画，离开动画。
进入动画：从元素开始执行的动画；
过程动画：在元素显示过程中执行的动画，可以指定动画开始的时间；
离开动画：在元素结尾的时候执行的动画；
进入动画在轨道上表示为蓝色，在轨道上表示为橘黄色，在轨道上表示为紫色。
滤镜参数
滤镜只作用于选中的元素，支持的滤镜有色调、曝光、高光、锐化、清晰、光滑、噪点
遮罩
遮罩作用于单个元素，遮罩是指只显示被遮罩挡住的部分，切换到遮罩之后，控制器就会变成遮罩的控制器，拖动缩放只针对遮罩形状，可以切换到其他选项，取消遮罩设置模式，遮罩支持遮罩动画。
遮罩动画
我们点击帧动画按钮添加一个关键帧，将时间轴拖动到其他位置，然后修改遮罩的状态，可以添加遮罩动画。
导出
点击导出按钮可以弹出导出菜单，支持导出 480p、720p、1080p、2K、4K清晰度的视频，同时也支持导出MP4、MP3、GIF格式的文件，点击开始合成会弹窗选择你要将文件导出到哪个文件夹，点击确定后等待合成结束即可，该过程不可以关闭浏览器。
AI功能集成
无界云剪支持各种AI工具的集成，目前我们集成了两个AI功能，一个是AI抠图，另外一个是AI涂抹，未来将会集成更多AI功能供大家使用，让视频制作变的简单高效。
AI抠图
选中图片后点击快捷工具栏的AI抠图按钮，鼠标点击需要扣出的元素显示蓝色选框后点击确认就可以快速抠图，该抠图功能支持各种图形的抠图，非常方便。
AI涂抹
可以涂抹掉图片中不想要的元素，选中图片点击AI涂抹按钮。
文章来源：https://www.toymoban.com/news/detail-842026.html
涂抹想要去掉的元素，点击支持AI等待执行结果即可。文章来源地址https://www.toymoban.com/news/detail-842026.html
到了这里，关于史上最强前端视频剪辑工具来了！的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
