我们开始吧：

• 产品：http://techslides.com/convert-images-to-video-with-javascript
• 演示：http://techslides.com/demos/image-video/create.html（一次选择多个图像）
• 编码：[just view the source]
• 您可以下载.webm视频文件

@K3N的答案提到了构建编码器。幸运的是，文章中有一个-https://github.com/antimatter15/whammy-片段：
你需要一个视频编码器，今天我碰巧发现了一个真实的JavaScript WebM编码器。

目前HTML5中还没有内置的API来进行视频编码。不过，允许基本的视频和音频录制的工作正在进行中--但目前还不可用（FireFox中提供了音频录制--它也仅限于 * 流 *）。
如果你对gif动画没问题，你可以使用一种编码器将帧编码为gif（见下文）。
对于视频-已经有尝试，或多或少成功，（我心目中的项目似乎不再可用），但从一个浏览器到另一个浏览器一直存在问题。
你也可以按照视频编码和文件格式规范，自己构建一个低级风格的编码器。这是可行的，但不是一个小项目。
无论如何，视频编码是一项性能要求极高的任务，即使对于本机编译的应用程序也是如此。在浏览器中运行这样的任务将是一个更慢的过程，可能对许多用户来说并不实用（移动的设备将消耗这些电池）。
IMO更好的方法（至少目前，直到前面提到的API可用为止）是将图像发送到服务器，并让服务器在后面处理编码作业，然后将结果发送到客户端。这样你就可以使用多线程，卸载客户端，使用本地编译的编码器，如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)

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

只是@michal回答的一个后续，whammy不再被维护，但是在ts-whammy有一个现代的whammy编码器分支。
请参阅get a data URL for an image的此答案

import tsWhammy from "ts-whammy/src/libs";

// images can from: canvas.toDataURL(type, encoderOptions)
const images = [
  "data:image/webp;base64,UklGRkZg....",
  "data:image/webp;base64,UklGRkZg....",
];

// Make a 5 second video
const blob = tsWhammy.fromImageArrayWithOptions(images, { duration: 5 });

console.log(blob.type, blob.size);