是否可以使用javascript从gif（或一系列图像）创建视频？

是否可以使用“javascript”或任何“web客户端”方法对gif（或一系列图像）和一些声音文件中的视频进行编码

具体来说，我想在客户端从一些源图像和声音文件动态创建一个视频文件。然后我想允许用户下载生成的视频

我知道我可以使用ffmpeg和PHP在服务器端从图像和mp3创建视频，但我不想使用这种方法，因为这将导致大量服务器CPU使用和数据传输。

当然

用于按计划调用函数，将图像源按顺序更改为下一个图像源

您可能希望预加载图像，以便在图像源更改时无需等待

---

更新：

---

单独使用JavaScript从一系列图像创建视频文件，但这不太容易，也不可能很好地工作。我建议您使用一些服务器端处理来生成这样的视频并将音频合并到其中（可能使用）。

您已经注意到，正是为了这个目的编写的C语言程序消耗大量CPU周期。是什么让你认为为另一个目的设计的脚本语言完全可以做到这一点

不，浏览器上的Javascript不能直接访问单个像素，当然也不能创建二进制文件。如果将帧作为单独的图像，则可以将其加载到

画布

标记中，这样可以将MPEG版本作为整数数组进行计算，然后将其发送回服务器（这将把数组转换为二进制文件），但哇，这会很慢吗。至少比ffmpeg慢1000倍

编辑

---

评论指出，事实上我完全错了。尽管如此，我还是坚持我最初的结论，即这是一个糟糕的想法。

要实现这一点，您需要解决几个问题

• 获取GIF的原始像素。
  可能是实现这一点的最佳方式，但我认为它不能很好地播放动画GIF。你当然可以看到一系列的图像

• 将帧转换为视频流。
  虽然有，但我不知道纯JS的视频编解码器。您可以查看ffmpeg源代码并尝试移植它
  除了实现视频压缩编解码器本身（如MPEG-1、-2、H.264等），还必须写入某种容器格式（例如，a。）

• 处理二进制数据。
  任何视频编解码器的输出都是二进制数据，JavaScript本质上不能很好地处理原始二进制数据。最近的浏览器增加了一些功能，以一种节省内存的方式来解决这个缺点

• 向用户传送视频文件。
  我知道这听起来很傻，因为从技术上讲，上述所有操作都会发生在用户的计算机上，但它们发生在浏览器沙箱中。现在，您必须将数据从浏览器中取出并保存到用户可以保存到其文件系统的文件中
  还有人建议使用

  data:

  URI（base64编码数据），但从内存的角度来看，这是一个糟糕的想法，特别是因为您将处理相对较大的视频数据。此时，您将有一个类型化数组中的视频流。从键入的数组创建一个新数组，并将该

  Blob

  传递给。这样，数据就不需要在内存中复制；相反，浏览器将从键入的数组“下载”到文件系统

当然，所有这些都假设用户的机器将有足够的内存（RAM）。与普通视频压缩实现不同，您不能将输出数据流式传输到磁盘；您必须将整个文件保存在内存中。你可能会比你想象的更快地耗尽内存

因此，虽然这在理论上是可能的，但这不是一个好主意。如果它能工作，它将非常慢，并且在编码视频时冻结浏览器（因为JS和浏览器UI共享相同的单线程）。不过，我想你可以让网络工作者参与进来，来解决这个问题

此时，您将不得不推出自己的服务器端解决方案，或者使用某种能为您带来重担的解决方案

---

或者，你也可以利用谷歌的Chrome浏览器来进行视频编码。NaCl允许您在浏览器中运行本机（C/C++）代码

看起来有一个，还有一个

---

显然，这只适用于Chrome。Firefox、Safari和IE将不支持NaCl。

现在已经是2014年底了，我不知道它是在什么时候实现的，但现在确实可以将视频转换为gif：

由制作该演示的同一人通过图书馆：

---

在Chrome 38中工作得很好，我相信任何其他支持Web Workers、文件API和类型化数组的浏览器。

我认为（但我可能错了）OP实际上想要生成一个可下载的视频文件，而不仅仅是浏览器中的视频。@Oded，事实上，单用JS创建视频在技术上是不可能的——这并不是一个好主意。一个文件只是一个位序列——你可以提取一些图像文件的位（例如，使用

画布
），然后做很多复杂的位操作，最后创建一个可作为视频文件播放的位序列。如果没有视频处理库，这将非常困难，据我所知，JavaScript没有这样的库。你可以自己编写这样一个库（在对图像和视频文件规范进行了广泛研究之后），也可以聘请他人为你编写；