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

Question

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

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

如果必须,我想我可能会使用视频屏幕捕获工具,但我希望有一个完整的开源链.

最后,我希望我将创建一系列png并使用ffmpeg将它们放在一起,我只是希望找到一种以自动化,开源方式实现这一目标的好方法.

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

我能想到的最接近的一点就是截图工具不是像webkit2png那样,而不是单个png,每秒需要60个png.在某些时候,我可能会尝试实现这一点,但我想看看是否有其他人有一些好的东西.

示例所以我实际上只是使用内置的iMovie标题卡进行了介绍.这是我想要做的事情的一个很好的例子.使用一点CSS3动画工作实际上应该是相当简单的.我有什么不错,但我想使用自定义图形,更好的字体/布局控制.

Answer 1

有一个使用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);
}());

Answer 2

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

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

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