从html5动画创建视频的最佳方法

Question

我想为一个视频播客做一个简短的介绍。作为一个古怪的web开发人员，我还没有接触到动画工具，也不了解动画工具，我想我可能会尝试使用各种html5技术来做入门。问题是，如何将它转换成一个视频剪辑，我可以轻松地放到iMovie中？

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

如果我必须这样做，我想我可能可以使用视频屏幕捕捉工具，但我希望有一个完整的开源链。

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

我只是想澄清一下，我想要做的是使用HTML5而不是闪存，但我不是想把它提供给互联网上的其他人，我想把它转换成视频，它永远不需要离开我的电脑，这实际上是一台mac，而不是Linux服务器。如果flash能做到，为什么不做html，对吧？这似乎是人们试图宣称的。问题是，我可以将SWF转换成标准视频，但是如何使用javascript或CSS3动画呢？显然，屏幕截图工具可以做一些工作，但这些通常是低帧率，不能以编程方式运行，据我所知。

我能想到的最接近的事情不是截屏工具，而是像webkit2png这样的东西，而不是一个png，每秒需要60个png。在某种程度上，我可能会尝试实现这一点，但我想看看其他人是否有好的东西。

示例，所以我实际上使用内置的iMovie标题卡做了一个介绍。这是一个很好的例子大概是我想做的那种事。实际上，通过一些CSS3动画工作，应该是相当简单的。我所拥有的是不错的，但我想使用自定义图形，更好的字体/布局控制。

Answer 1

到目前为止，我所发现的不需要编写c++代码的最好的地方是桌面使用Tit百分制。它提供了一个从javascript代码中获得的takeScreenshot函数。takeScreenshot函数获得整个桌面的屏幕截图，但是自动裁剪应该很容易。有了大量的javascript动画库，我应该能够在每一个帧上获得一个屏幕快照，即使它不能实时发生。

虽然我无法使用CSS动画，但这可能是最灵活的解决方案，因为我可以用javascript来处理CSS动画，而且我可以更好地控制帧速率，等等。

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

Answer 2

有一个使用javascript和PHPto从画布动画中创建一个视频的代码教程。这个程序像电影一样逐帧保存画布动画，然后你可以用你选择的编解码器将这些帧转换成特定的视频格式。

链接页中的代码。

(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);
}());

Answer 3

嗯，Techsmith Snagit捕捉在AVI，或他们的高端应用camtasia (生成一个Flash视频和网页启动器)将工作。为什么不简单地创建您想要接触的特性的Powerpoint幻灯片，并使用一组您想要深入说明的实际演示页面。这就是我要采取的方法。