。

为什么突然想做一个这么项目来呢#xff0c;主要是最近一直在利用手机…

纯网页版视频编辑器

介绍本篇文章打算利用纯前端的技术来实现一个网页版的视频编辑器。

为什么突然想做一个这么项目来呢主要是最近一直在利用手机剪映来剪辑一些照片或者视频之类的在剪辑的过程中突然想到有没有一种纯网页版的视频剪辑网站呢于是搜了下大多为

sass

成熟版需要花钱的那种然后再加上最近一直在看前端技术于是就打算利用现学的前端技术来实现一个纯前端的纯网页版的视频编辑器demo。

先给大家看下整体效果图

/text/CherryBombOne-Regular.ttf,format:

truetype}}]}

mockMethods代码写完后不要忘记把素材也要放到项目文件夹里

4.2

多轨道编辑即是将不同的素材放置在不同的轨道上,通过调整它们在时间线上的位置和长度,达到叠加、剪辑和混合的效果。

通常情况下,视频素材放置在视频轨道上,音频素材放置在音频轨道上。

这样,我们可以通过调整素材在时间线上的位置和长度来控制视频和音频的播放顺序、时长和重叠关系

ffmpeg

首先创建一个任务队列对象来存储多轨道的数据比如视频、音乐、文本等等素材轨道。

private

Command()然后我们可以对其创建任务并判断任务队列中是否有执行任务的命令如果有则返回任务存在如果没有则返回

createTask(commands:

{resolve,reject})})this.taskQueue.push({instance,commands,...callbacks}

Task)return

instance}}用户把素材资源从本地拖拽到页面内需要获取到文件内容

string,

this.baseCommand.mergeAudio(this.pathConfig,start,itemList)if

(this.audioCache.indexOf(commands.join())

-1)

this.createTask(commands)}获取视频每一帧

string,

${this.pathConfig.framePath}${videoName}const

fileName

jpg)}目前只是一个简易的demo如果有需要的话可以私戳后台谢谢。