简单而不简单的视频剪辑web实现

1,825 阅读2分钟

为什么要写这篇文章

有点标题党了。最近看到某些视频剪辑工具,觉得蛮好玩的,看起来很复杂其实本质上实现相应一些基础功能其实相对简单,这里核心是视频剪辑和在视频添加对应的文案。当然衍生下去其实还有更多的一些功能实现。

相关知识点

  • ffmpeg - 音视频处理工具 这个工具是核心,其他功能其实都是依赖该工具。

效果

截图效果把内容打了黑点,重点不在视频内容。

  • 添加文字 image.png
  • 生成新视频 可以看到视频中就出现了该文案 image.png

实现流程图

这是主要流程图,为了实现方便这里很多链接会固定写入代码。 image.png

视频转序列帧 + 提取音频

image.png

canvas绘制序列帧

这里比较简单通过canvas把图片画处出来,然后我们就可以实现在canvas添加对应的文字等等,最后在把canvas-> base64 -> blob ->上传服务器 -> 覆盖原来的序列帧

序列帧+音频 => 合成视频

这里很简单,利用ffmpeg把图片和音视频转换成视频 image.png

更多的功能

ffmpeg其实还可以进行音视频的时间剪辑,其实也就是去执行ffmpeg的命令。这里不做过多描述。

总结

其实核心就是怎么把视频当作图片通过canvas去编辑,这里就借用了ffmpeg工具去实现该功能,其实沿着这个点去实现其他点,其实就会变得很简单了,我们可以把视频当做一堆图片去进行操作。这样的话我们就能实现很多效果。时间紧张,写的比较粗糙。谢谢