史上最强前端视频剪辑工具来了！_前端处理视频

最近开发了一款网页版的视频剪辑工具，交互异常复杂，肝了很多个日日夜夜！终于可以公测了，欢迎大家使用！下面是工具的介绍以及使用说明，除了强大还是强大，基础功能目前已经完善，接下来就是加入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涂抹按钮。

涂抹想要去掉的元素，点击支持AI等待执行结果即可。