创建从HTML5动画视频最好的方法 [英] best way to create video from html5 animation

问题描述

我想为视频播客很短的前奏。作为一个令人讨厌的Web开发人员，而不是已经具有动画工具获取或知识，我想我可能在做使用各种HTML5技术的介绍采取刺伤。问题是，我怎么把它转换成视频剪辑，我可以轻松地拖放到iMovie中？

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?

如果我有，我认为这是可以，如果我只能通过导出一个PNG使用getImageData每一帧使用帆布来完成。唯一的缺点是，我仅仅局限于画布。我希望使用新的HTML5 / CSS3 / SVG技术的整个范围。我不需要这个功能，对于一般的网络使用的工作，只是为了我自己，所以我很乐意为任何需要的安装等，使其工作。

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.

在最后，我希望我会创造出一系列png格式的，用的ffmpeg把它们放在一起，我只是希望弄清楚在一个自动化的，开放源码的方式这样做的很好的方式。

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.

更新我只是想澄清什么，我基本上试图做的是使用，而不是像闪存HTML5，但我并不想将它有助于其他人在互联网上，我想将其转换为视频，它永远不需要离开我的电脑，这实际上是一个苹果，而不是一台Linux服务器。如果Flash能做到这一点，为什么不HTML，对不对？这似乎是什么人试图声称。问题是，我可以采取SWF并将其转换为标准的视频，但你怎么做，与JavaScript或CSS3动画？显然，一个屏幕捕获工具可以排序做的工作，但这些通常是低帧率，而不能以编程方式运行，以我的知识。

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.

我能想到的最接近类的事情是不是一个截图工具会是这样webkit2png，而不是只有一个PNG，这将需要每秒60 PNG格式。在某些时候，我可能真的试图实现准确，但我想看看别人有好东西。

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.

示例所以，我其实只是做了使用前奏内置在iMovie称号卡。 这大致诸如此类的事情，我想这样做的一个很好的例子。实际上应该是一个小CSS3动画作品相当简单。我有什么不坏，但我想用自定义图形，具有更好的字体/布局控制。

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.

推荐答案

到目前为止，到目前为止，我已经找到了最好的事情，不会要求我C code为使用钛桌面来写。它具有可从JavaScript code一takeScreenshot功能。该takeScreenshot函数获取整个桌面的截图，但它应该是容易实现自动化裁剪下来。使用JavaScript库的动画了过多在那里，我应该能够在每一帧得到一个截图的方式来破解，即使不能在实时发生的。

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.

虽然我不能使用CSS动画，这可能是最灵活的解决方案，无论如何，因为什么我可以用CSS动画做的，我可以用JavaScript做什么，我会拥有超过帧率更多的控制，等等。

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.

此外，这应该允许我用所有的东西，浏览器能够结合HTML / CSS / JS / SVG /帆布。

Additionally, this should allow me to use all things the browser is capable of, combining html/css/js/svg/canvas.

这篇关于创建从HTML5动画视频最好的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！