摘要
最近开发了一款网页版的视频剪辑工具,交互异常复杂,肝了很多个日日夜夜!终于可以公测了,欢迎大家使用!下面是工具的介绍以及使用说明,除了强大还是强大,基础功能目前已经完善,接下来就是加入AI功能了,编辑器基于react + typescript + webgl开发,相信未来会有越来越多的C/S架构应用转成B/S架构,前端并未死,只是淘汰了一部分初级的研发工程师!
编辑器概要
无界云剪基于浏览器开发,无需下载安装,只需要打开浏览器输入网址()即可访问,需要使用高版本的谷歌浏览器,谷歌内核需要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等待执行结果即可。
原文链接:
项目官方体验地址:
关注“前端组件开发”公众号后,私信后可申请加入无界云剪官方沟通交流群。
限时特惠:本站每日持续更新海内外内部创业教程,一年会员只需88元,全站资源免费下载点击查看详情。
站长微信:nnxmw123