HTML5 从图像生成视频
HTML5 generating video from images
我想知道，既然 HTML 和 javascript 在一起令人着迷，HTML5 中是否有解决方案可以从许多图像生成视频文件？
例如，您可以将视频加载到 canvas 中，并通过操作 canvas 使其显示为灰度视频。但是，我想知道，
如果有某种方法可以从该灰度版本生成视频文件。如果您想通过 whatsapp 等发送视频，这将是有道理的。
谢谢
HTML5 目前没有内置的 API 来进行视频编码。虽然有 work in progress，以允许基本的视频和音频录制 - 但目前不可用（FireFox 中提供音频录制 - 它也仅限于 streams）。
如果您对 gif 动画没问题，您可以使用其中一种编码器将帧编码为 gif（见下文）。
对于视频 - 已经进行了或多或少成功的尝试，（我想到的项目似乎不再可用）但是从一个浏览器到另一个浏览器一直存在问题。
可以选择按照视频编码和文件格式规范自行构建低级风格的编码器。这是可行的，但它不是一个小项目。
无论如何，即使对于本机编译的应用程序，编码视频也是一项非常需要性能的任务。 运行 在浏览器中执行这样的任务将是一个更慢的过程，并且对于许多用户来说可能不切实际（而且移动设备会消耗这些电池）。
IMO 更好的方法（至少目前，在上述 API 可用之前）是将图像发送到服务器并让服务器在后台处理编码作业，然后将结果发送到客户。这样你就可以使用多线程，卸载客户端，使用原生编译编码器，如 ffmpeg，生成的视频可以流回。
一些资源
开始吧：
- 文章：http://techslides.com/convert-images-to-video-with-javascript
- 演示：http://techslides.com/demos/image-video/create.html （select 一次显示多个图像）
- 代码：
[just view the source]
- 您可以下载
.webm个视频文件
@K3N 回答提到构建编码器。幸运的是，有一个 - https://github.com/antimatter15/whammy - 文章片段：
You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder.
您好，我使用技术幻灯片提供的代码构建了它。
我还制作了一个模板应用程序，您可以在其中获取图像列表并将它们转换为视频格式。您必须根据自己的需要编辑代码。不过，它仅在 chrome 和 YouTube 中受支持。所以基本上在 whammy.js 中，您将图像转换为 JavaScript 文件中的 canvas，然后使用 whammy.js 函数将 canvas 转换为视频。您需要设置事件侦听器并将视频加载到视频标签中。 Whammy.js 只生成webp文件。将其转换为 mp4：
将其加载到 YouTube，然后使用 YouTube 将其下载为 mp4。希望对你有帮助。
我想知道，既然 HTML 和 javascript 在一起令人着迷，HTML5 中是否有解决方案可以从许多图像生成视频文件？
例如，您可以将视频加载到 canvas 中，并通过操作 canvas 使其显示为灰度视频。但是，我想知道， 如果有某种方法可以从该灰度版本生成视频文件。如果您想通过 whatsapp 等发送视频，这将是有道理的。
谢谢
HTML5 目前没有内置的 API 来进行视频编码。虽然有 work in progress，以允许基本的视频和音频录制 - 但目前不可用（FireFox 中提供音频录制 - 它也仅限于 streams）。
如果您对 gif 动画没问题，您可以使用其中一种编码器将帧编码为 gif（见下文）。
对于视频 - 已经进行了或多或少成功的尝试，（我想到的项目似乎不再可用）但是从一个浏览器到另一个浏览器一直存在问题。
可以选择按照视频编码和文件格式规范自行构建低级风格的编码器。这是可行的，但它不是一个小项目。
无论如何，即使对于本机编译的应用程序，编码视频也是一项非常需要性能的任务。 运行 在浏览器中执行这样的任务将是一个更慢的过程，并且对于许多用户来说可能不切实际（而且移动设备会消耗这些电池）。
IMO 更好的方法（至少目前，在上述 API 可用之前）是将图像发送到服务器并让服务器在后台处理编码作业，然后将结果发送到客户。这样你就可以使用多线程，卸载客户端，使用原生编译编码器，如 ffmpeg，生成的视频可以流回。
一些资源
开始吧：
- 文章：http://techslides.com/convert-images-to-video-with-javascript
- 演示：http://techslides.com/demos/image-video/create.html （select 一次显示多个图像）
- 代码：
[just view the source] - 您可以下载
.webm个视频文件
@K3N 回答提到构建编码器。幸运的是，有一个 - https://github.com/antimatter15/whammy - 文章片段：
You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder.
您好，我使用技术幻灯片提供的代码构建了它。 我还制作了一个模板应用程序，您可以在其中获取图像列表并将它们转换为视频格式。您必须根据自己的需要编辑代码。不过，它仅在 chrome 和 YouTube 中受支持。所以基本上在 whammy.js 中，您将图像转换为 JavaScript 文件中的 canvas，然后使用 whammy.js 函数将 canvas 转换为视频。您需要设置事件侦听器并将视频加载到视频标签中。 Whammy.js 只生成webp文件。将其转换为 mp4： 将其加载到 YouTube，然后使用 YouTube 将其下载为 mp4。希望对你有帮助。