best way to create video from html5 animation
Well Techsmith Snagit captures in AVI, or their premium application camtasia ( generates a Flash video and a web page launcher) would work. Why not simply create a Powerpoint slide of the features you want to touch on and use a HTML set of pages of actual demos you want to illustrate in depth. This is the approach I am taking.
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);
}());
So far the best thing I've found so far that won't require me to write c code is using Titanium for desktop. It features a takeScreenshot function available from javascript code. The takeScreenshot function gets a screenshot of the entire desktop, but it should be easy to automate cropping that down. With a plethora of javascript animation libraries out there, I should be able to hack in ways of getting a screenshot at every frame, even if it can't happen in real-time.
While I won't be able to use CSS animations, this is probably the most flexible solution anyway, given that anything I can do with CSS animations I can do with javascript, and I'll have more control over frame rate, etc.
Additionally, this should allow me to use all things the browser is capable of, combining html/css/js/svg/canvas.