HTML5从图像生成视频

Question

我想知道，既然HTML和javascript在一起让人着迷，在HTML5中是否有一个解决方案可以从许多图像中生成一个视频文件？

例如，您可以通过操作画布将视频加载到画布中，并使其显示为灰度视频。然而，我想知道，是否有某种方法可以从灰度版本中生成视频文件。如果你想通过whatsapp等发送视频，这将是有意义的。

谢谢

Answer 1

目前在HTML5中还没有内置的视频编码接口。不过，也有允许基本视频和音频录制的work in progress --但目前还不能使用(音频录制在FireFox中可用--它也仅限于流)。

如果您可以使用gif动画，您可以使用编码器之一将帧编码为gif (见下文)。

对于视频-已经有一些尝试，或多或少成功了，(我脑海中的项目似乎不再可用)，但从一个浏览器到另一个浏览器都存在问题。

可以选择自己构建一个低级样式的编码器，遵循视频编码和文件格式规范。这是可行的，但这不是一个小项目。

在任何情况下，编码视频是一项非常需要性能的任务，即使对于本机编译的应用程序也是如此。在浏览器中运行这样的任务将是一个更加缓慢的过程，而且对于许多用户来说可能不切实际(而且移动设备将消耗这些电池)。

更好的方法是将图像发送到服务器，并让服务器在后台处理编码作业，然后将结果发送给客户端。通过这种方式，您可以使用多线程、卸载客户端、使用本地编译编码器(如ffmpeg )，并可以将生成的视频回流。

一些资源

• MediaStream Recording API
• Gif encoder 1
• Gif encoder 2 (NodeJS)
• HTML5 Video recording information and status
• Realtime video encoder (NodeJS/ffmpeg)
• libvpx (requires emscripten/asm.js)

Answer 2

我们开始吧：

视频文件文章：http://techslides.com/convert-images-to-video-with-javascript

• Demo：http://techslides.com/demos/image-video/create.html (一次选择多个图像)

• 代码：[just view the source]

• You可以下载.webm视频文件

@K3N answer提到了构建编码器。幸运的是，这篇文章中有一个https://github.com/antimatter15/whammy片段：

你需要一个视频编码器，今天我偶然发现了

，一个实时的JavaScript WebM编码器。

Answer 3

嗨，我已经使用技术幻灯片提供的代码构建了它。此外，我还制作了一个模板应用程序，您可以在其中获取图像列表并将其转换为视频格式。您必须根据自己的需要对代码进行编辑。不过，它只支持chrome和YouTube。因此，基本上在whammy.js中，您可以将图像转换为JavaScript文件中的画布，然后使用whammy.js函数将画布转换为视频。您需要设置事件监听器，并将视频加载到video标签中。Whammy.js只生成webp文件。要将其转换为mp4:将其加载到YouTube中，然后使用YouTube将其作为mp4下载。希望能有所帮助。