我想为视频播客做一个简短的介绍。作为一个令人讨厌的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动画工作实际上应该是相当简单的。我有什么不错，但我想使用自定义图形，更好的字体/布局控制。
解决方法
有一个使用javascript和PHP到
create a video from your canvas animation的代码教程。该程序逐帧保存画布动画，就像在电影中一样，然后你可以使用你选择的编解码器将这一堆帧转换为特定的视频格式。
(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.5)';
c.fillRect(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,Math.PI*2,false);
c.fill();
}
}
// execute frame() every 30 ms
setInterval(frame,30);
}());
