best way to create video from html5 animation

Question

I wanted to make a short intro for a video podcast. Being a geeky web developer and not already having access to or knowledge of animation tools, I thought I might take a stab at doing the intro using various html5 techniques. The problem is, how do I turn that into a video clip I can easily drop into iMovie?

If I have to, I think this can be accomplished if I only use canvas by exporting a png every frame using getImageData. The only drawback is that I'm limited to just canvas. I was hoping to use the whole range of new html5/css3/svg techniques. I don't need this functionality to work for general web use, just for myself, so I'd be happy for anything that requires installation etc. to make it work.

If I have to, I guess I can probably use a video screen capture tool, but I was hoping for a complete open source chain.

In the end, I expect I'll be creating a series of pngs and using ffmpeg to put them together, I was just hoping to figure out a great way of doing this in an automated, open source way.

Update I just wanted to clarify that what I'm basically trying to do is use HTML5 instead of something like flash, but I'm not trying to serve it to other people on the internet, I want to convert it to video, and it never needs to leave my computer, which is actually a mac, not a Linux server. If flash can do it, why not html, right? That seems to be what people are trying to claim. The problem is, I can take a SWF and convert it to standard video, but how do you do that with javascript or CSS3 animations? Obviously a screen capture tool can sort of do the job, but those are usually low frame rate, and can't be run programmatically to my knowledge.

The closest sort of thing I can think of that isn't a screenshot tool would be something like webkit2png, only instead of a single png, it would take 60 pngs per second. At some point, I might actually try to implement exactly that, but I wanted to see if anyone else had something good.

Example So I actually just did an intro using the built in iMovie title cards. This is a good example of roughly the sort of thing I would like to do. Should actually be fairly straightforward with a little CSS3 animation work. What I have isn't bad, but I would like to use custom graphics, with better font/layout control.

Answer 1

There is a tutorial with the code using both javascript and PHP to create a video from your canvas animation. The program save frame by frame of your canvas animation like in a movie, and then you can convert this stack of frames to a specific video format with the codec of your choice.

Code from the linked page.

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