从 html5 动画创建视频的最佳方法 [关闭]答案

【问题标题】：best way to create video from html5 animation [closed]从 html5 动画创建视频的最佳方法 [关闭]
【发布时间】：2011-01-06 17:59:53
【问题描述】：

我想为一个视频播客做一个简短的介绍。作为一个极客的 web 开发人员，并且还没有访问或了解动画工具，我想我可能会尝试使用各种 html5 技术进行介绍。问题是，如何将其转换为可以轻松放入 iMovie 的视频剪辑？

如果必须的话，我认为这可以通过使用 getImageData 每帧导出一个 png 来实现。唯一的缺点是我仅限于画布。我希望使用所有新的 html5/css3/svg 技术。我不需要这个功能来为一般的网络使用，只为我自己，所以我很高兴任何需要安装等才能让它工作的东西。

如果必须，我想我可能会使用视频截屏工具，但我希望有一个完整的开源链。

最后，我希望我会创建一系列 png 并使用 ffmpeg 将它们组合在一起，我只是希望找到一种以自动化、开源方式实现此目的的好方法。

更新我只是想澄清一下，我基本上想要做的是使用 HTML5 而不是 Flash 之类的东西，但我并不是想将它提供给互联网上的其他人，我想把它转换成视频，它永远不需要离开我的电脑，这实际上是一台 mac，而不是 Linux 服务器。如果flash可以做到，为什么不是html，对吧？这似乎是人们试图声称的。问题是，我可以获取 SWF 并将其转换为标准视频，但是您如何使用 javascript 或 CSS3 动画来做到这一点？显然，屏幕捕获工具可以完成这项工作，但这些工具通常帧速率较低，据我所知无法以编程方式运行。

我能想到的最接近的不是屏幕截图工具的东西是 webkit2png 之类的东西，只是不是单个 png，而是每秒需要 60 个 png。在某些时候，我实际上可能会尝试完全实现这一点，但我想看看其他人是否有好的东西。

示例所以我实际上只是使用内置的 iMovie 标题卡做了一个介绍。 This is a good example 大致是我想做的事情。实际上应该是相当简单的一点 CSS3 动画工作。我所拥有的还不错，但我想使用自定义图形，具有更好的字体/布局控制。

【问题讨论】：

标签： html animation webkit screenshot

【解决方案1】：

create a video from your canvas animation 有一个使用 javascript 和 PHP 的代码教程。该程序会像在电影中一样逐帧保存您的画布动画，然后您可以使用您选择的编解码器将此帧堆栈转换为特定的视频格式。

来自链接页面的代码。

(function () {
    var canvas = document.getElementById('c'),
        c = canvas.getContext('2d'),
        w = canvas.width, h = canvas.height,
        p = [], clr, n = 200;

    clr = [ 'red', 'green', 'blue', 'yellow', 'purple' ];

    for (var i = 0; i < n; i++) {
        // generate particle with random initial velocity, radius, and color
        p.push({
            x: w/2,
            y: h/2,
            vx: Math.random()*12-6,
            vy: Math.random()*12-6,
            r: Math.random()*4+3,
            clr: Math.floor(Math.random()*clr.length)
        });
    }

    function frame() {
        // cover the canvas with 50% opacity (creates fading trails)
        c.fillStyle = 'rgba(0,0,0,0.5)';
        c.fillRect(0, 0, w, h);

        for (var i = 0; i < n; i++) {
            // reduce velocity to 99%
            p[i].vx *= 0.99;
            p[i].vy *= 0.99;

            // adjust position by the current velocity
            p[i].x += p[i].vx;
            p[i].y += p[i].vy;

            // detect collisions with the edges
            if (p[i].x < p[i].r || p[i].x > w-p[i].r) {
                // reverse velocity (direction)
                p[i].vx = -p[i].vx;
                // adjust position again (in case it already passed the edge)
                p[i].x += p[i].vx;
            }
            // see above
            if (p[i].y < p[i].r || p[i].y > h-p[i].r) {
                p[i].vy = -p[i].vy;
                p[i].y += p[i].vy;
            }

            // draw the circle at the new postion
            c.fillStyle = clr[p[i].clr]; // set color
            c.beginPath();
            c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI*2, false);
            c.fill();
        }
    }

    // execute frame() every 30 ms
    setInterval(frame, 30);
}());

【讨论】：

我在我的问题中将此列为一种可能性，但我真的很想要包含所有选项的东西。例如，这不会捕获 CSS3 动画或 SVG。
那么您希望将窗口上下文转储为图像。这可能更复杂。
webkit2png 只拍一张。多个 webkit2png 捕获不太可能解决该问题。我猜可能会有一个循环，在初始渲染和捕获之间有一个延迟，但是如果有意义的话就会变得很麻烦。图像不会完全同步。我想知道 webkit2png 是否可以让它推出多张图片。
询问浏览器的实现者。似乎安全上下文会禁止它。但我仍在挖掘信息。
我非常怀疑我是否可以在 javascript 中从实际的股票浏览器中获得任何工作，但无需花费数小时来弄清楚，我想知道我是否可以制作像 webkit2png 这样的原生内容只是输出30fps，或者这在 css 转换中是不可能的。也可以很好地将函数注入浏览器对象模型 takeScreenshot()，我可以在基于 javascript 的动画（如定格动画）中使用该函数。 javascript 动画不必实时工作。

【解决方案2】：

那么 Techsmith Snagit 在 AVI 中捕获，或者他们的高级应用程序 camtasia（生成 Flash 视频和网页启动器）都可以工作。为什么不简单地创建一个您想要触及的功能的 Powerpoint 幻灯片，并使用一组您想要深入说明的实际演示的 HTML 页面。这是我正在采取的方法。

【讨论】：

我不是在做一个关于 html 的播客，我只是想用可以包含在视频中的 html 制作一个简短的动画 - 但视频不是 html 的演示。我不希望它看起来像一个截屏视频 - 我只是希望它看起来像一个流畅的视频。

【解决方案3】：

到目前为止，我发现的最好的不需要我编写 c 代码的东西是使用 Titanium 桌面版。它具有可从 javascript 代码获得的 takeScreenshot 功能。 takeScreenshot 函数获取整个桌面的屏幕截图，但自动裁剪应该很容易。有了大量的 javascript 动画库，我应该能够破解每一帧的屏幕截图，即使它不能实时发生。

虽然我不能使用 CSS 动画，但这可能是最灵活的解决方案，因为我可以用 CSS 动画做的任何事情我都可以用 javascript 做，而且我可以更好地控制帧速率，等等

此外，这应该允许我使用浏览器能够使用的所有功能，结合 html/css/js/svg/canvas。

【讨论】：

嗨@russel，已经有一段时间了，我想知道您是否对您的问题提出了更高级的看法。
见我也试图实现类似的东西。我的我需要在服务器上运行。我最近一直在研究很多选择。我刚刚完成了使用带有 imageJ 的 JavaFX 来实现它。但是很难扩大这个过程。因此，如果您可以分享任何有用的东西，我们将不胜感激。 TIA
我在这一点上继续前进。我想说最简单的尝试（如果你想尝试走这条路）是使用 phantomjs。没有太多麻烦，你应该可以使用渲染方法（phantomjs.org/api/webpage/method/render.html）。不确定以这种方式创建完整动画的效率有多高:)

【解决方案4】：

我曾开发过一种工具，可以满足您的要求。它基本上使用cutycapt（或任何其他将带有CSS的HTML转换为图像的工具）并根据所需的帧速率拍摄一系列屏幕截图。

为此，动画应该是纯 CSS 动画，并且该工具通过解析 CSS 插入中间帧的 CSS 属性。

https://github.com/bpsagar/css2video

我不确定该工具是否完整，如果您有兴趣，请告诉我。

【讨论】：

【解决方案5】：

在我看来你是对的，最好的方法是从画布的数据中创建图像，然后通过模块（例如fluent-ffmpeg，这是一个节点 js 包）将所有这些图像编译成视频。这很简单，但要注意 FPS（帧速率），如果您尽可能快地创建这些图像，您可能会更改视频的 fps，例如，如果您递归使用 requestAnimationFrame()，您将达到 60fps。因此，您应该将时间设置为每 1/30 秒（例如，如果您想要 30fps 视频），而不是读取 html5 视频，并从 currentTime 创建一个图像，直到视频结束。如果您不仅有一个画布，如果您通过多个画布在视频上应用动画，您可以创建一个新的空画布并在其上绘制所有画布的数据，从而只创建一个图像，而不是为每个画布创建一个图像。

【讨论】：