HTML5 从图像生成视频

Posted 2023-05-07

【中文标题】HTML5 从图像生成视频

【英文标题】：HTML5 generating video from images

【发布时间】：2015-04-27 07:53:09

【问题描述】：

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

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

谢谢

【问题讨论】：

这能回答你的问题吗？ How to save canvas animation as gif or webm?

【参考方案1】：

我们开始吧：

文章：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 - sn-p：

您需要一个视频编码器，而今天我偶然发现了 Whammy，一个实时 JavaScript WebM 编码器。

【讨论】：

由于WEBP图片格式仅在Chrome和Opera中支持，Whammy在其他浏览器中不支持((caniuse.com/#search=webp

@AndriiVerbytskyi 公平点。客户端编码几乎是实验性的 - 这里是龙！

今天似乎得到了广泛的支持，Facebook、LinkedIn、Twitter、YouTube 和 Vimeo 等社交媒体网站都支持 WebM 作为视频的上传格式。

生成无法在线或本地播放的视频，只会崩溃回到 0

【参考方案2】：

目前没有内置的 API 可以在 HTML5 中进行视频编码。虽然有 work in progress，以允许基本的视频和音频录制 - 但目前不可用（音频录制在 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)

【参考方案3】：

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