javascript - 是否可以使用爆米花 JS 导出带有视频叠加评论的视频？

Question

我正在使用 porpcorn JS 在视频上添加注释，我在视频上创建了叠加层，所有注释都呈现在视频上。有什么方法可以让我在 .mp4 文件中导出带有嵌入 html 内容的视频。那么我可以在 VLC 等任何原生播放器中播放该视频吗？

Answer 1

您最好在服务器端处理 所有 并在客户端简单地播放呈现的视频。如果客户端的代码足够复杂，您可以考虑以下两种选择:

最简单的选择:客户端帧渲染，服务器视频渲染

您可以非常轻松地从视频中抓取每一帧，将其绘制到 Canvas 上，然后将注释绘制到同一 Canvas 上(使用自定义代码或库，如 html2canvas)。接下来最简单要做的是将所有帧一一发送到服务器并使用一个简单的 ffmpeg 命令(类似于 ffmpeg -i img%03d.png -c:v libx264 -pix_fmt yuv420p out.mp4) 生成 mp4，然后将其发送回客户端。

最佳但困难的选择:客户端帧渲染、客户端视频渲染

'当然'实际上在客户端渲染视频也不是不可能。但是请注意，我所知道的唯一库不呈现 .mp4 文件，而是呈现 .webm 文件。这是否是一个问题取决于你。无论哪种方式，能够执行此操作的库称为 whammy.js .您实际上需要再次将所有帧和注释绘制到 Canvas 上，然后将其encoder.add 添加到 Whammy 视频对象。 API 非常简单而且切中要点，但请注意，我不知道它的跨平台支持程度如何。