史上最强前端视频剪辑工具来了!

最近开发了一款网页版的视频剪辑工具,交互异常复杂,肝了很多个日日夜夜!终于可以公测了,欢迎大家使用!下面是工具的介绍以及使用说明,除了强大还是强大,基础功能目前已经完善,接下来就是加入AI功能了,编辑器基于react + typescript + webgl开发,相信未来会有越来越多的C/S架构应用转成B/S架构,前端并未死,只是淘汰了一部分初级的研发工程师!

编辑器概要

无界云剪基于浏览器开发,无需下载安装,只需要打开浏览器输入网址(video.h5ds.***)即可访问,需要使用高版本的谷歌浏览器,谷歌内核需要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等待执行结果即可。

转载请说明出处内容投诉
CSS教程_站长资源网 » 史上最强前端视频剪辑工具来了!

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买