La mejor manera de crear video a partir de animación HTML

Quería hacer una breve introducción para un video podcast. Siendo un desarrollador web geek y sin tener acceso ni conocimiento de las herramientas de animación, pensé que podría intentar hacer la introducción usando varias técnicas html5. El problema es, ¿cómo puedo convertir eso en un videoclip que puedo colocar fácilmente en iMovie?

Si tengo que hacerlo, creo que esto se puede lograr si solo uso el lienzo exportando un png cada cuadro usando getImageData. El único inconveniente es que estoy limitado solo al lienzo. Esperaba usar toda la gama de nuevas técnicas html5 / css3 / svg. No necesito esta funcionalidad para el uso general de la web, solo para mí, por lo que estaría feliz por cualquier cosa que requiera instalación, etc. para que funcione.

Si tengo que hacerlo, supongo que probablemente pueda usar una herramienta de captura de pantalla de video, pero esperaba una cadena de código abierto completa.

Al final, espero crear una serie de pngs y usar ffmpeg para unirlos, solo esperaba encontrar una excelente manera de hacerlo de una manera automatizada y de código abierto.

Actualizar Solo quería aclarar que lo que básicamente estoy tratando de hacer es usar HTML5 en lugar de algo como flash, pero no estoy tratando de servirlo a otras personas en Internet, quiero convertirlo a video, y nunca necesita dejar mi computadora, que en realidad es una Mac, no un servidor Linux. Si flash puede hacerlo, ¿por qué no html, verdad? Eso parece ser lo que la gente intenta reclamar. El problema es que puedo tomar un SWF y convertirlo a video estándar, pero ¿cómo se hace eso con las animaciones de JavaScript o CSS3? Obviamente, una herramienta de captura de pantalla puede hacer el trabajo, pero generalmente son de baja velocidad de fotogramas y no se pueden ejecutar mediante programación que yo sepa.

Lo más parecido que se me ocurre que no es una herramienta de captura de pantalla sería algo así como webkit2png, solo que en lugar de un solo png, tomaría 60 pngs por segundo. En algún momento, podría intentar implementar exactamente eso, pero quería ver si alguien más tenía algo bueno.

Ejemplo Así que en realidad acabo de hacer una introducción usando las tarjetas de título de iMovie incorporadas.Es un buen ejemplo más o menos del tipo de cosas que me gustaría hacer. En realidad, debería ser bastante sencillo con un poco de trabajo de animación CSS3. Lo que tengo no está mal, pero me gustaría usar gráficos personalizados, con un mejor control de fuente / diseño.

Respuestas a la pregunta(7)

Su respuesta a la pregunta