melhor maneira de criar vídeo a partir de animação html5

Eu queria fazer uma breve introdução para um podcast de vídeo. Sendo um desenvolvedor da web nerd e ainda não tendo acesso ou conhecimento de ferramentas de animação, pensei em fazer uma introdução à introdução usando várias técnicas html5. O problema é: como transformar isso em um videoclipe para que eu possa inserir facilmente no iMovie?

Se for necessário, acho que isso pode ser conseguido se eu usar apenas a tela exportando um png a cada quadro usando getImageData. A única desvantagem é que estou limitado apenas à tela. Eu esperava usar toda a gama de novas técnicas html5 / css3 / svg. Eu não preciso dessa funcionalidade para trabalhar com o uso geral da Web, apenas para mim, então ficaria feliz com qualquer coisa que exija instalação, etc., para fazê-la funcionar.

Se for necessário, acho que provavelmente posso usar uma ferramenta de captura de tela de vídeo, mas esperava uma cadeia completa de código aberto.

No final, espero criar uma série de pngs e usar o ffmpeg para montá-los. Só esperava descobrir uma ótima maneira de fazer isso de maneira automatizada e de código aberto.

Atualizar Eu só queria esclarecer que o que estou basicamente tentando fazer é usar HTML5 em vez de algo como flash, mas não estou tentando veiculá-lo para outras pessoas na internet, quero convertê-lo em vídeo e nunca precisa sair do meu computador, que é realmente um mac, não um servidor Linux. Se o flash pode fazer isso, por que não html, certo? Isso parece ser o que as pessoas estão tentando reivindicar. O problema é que posso pegar um SWF e convertê-lo em vídeo padrão, mas como você faz isso com animações javascript ou CSS3? Obviamente, uma ferramenta de captura de tela pode meio que fazer o trabalho, mas essas geralmente são de baixa taxa de quadros e não podem ser executadas programaticamente de acordo com o meu conhecimento.

O tipo de coisa mais próxima que consigo pensar que não é uma ferramenta de captura de tela seria algo como webkit2png, mas em vez de um único png, seriam necessários 60 pngs por segundo. Em algum momento, eu poderia realmente tentar implementar exatamente isso, mas queria ver se mais alguém tinha algo de bom.

Exemplo Então, na verdade, fiz uma introdução usando os cartões de título do iMovie.Este é um bom exemplo aproximadamente do tipo de coisa que eu gostaria de fazer. Na verdade, deve ser bastante direto com um pequeno trabalho de animação CSS3. O que tenho não é ruim, mas gostaria de usar gráficos personalizados, com melhor controle de fonte / layout.

questionAnswers(7)

yourAnswerToTheQuestion