Creating animated titles with HTML5 and CSS3

[pippas]

Thanks mostly to the advice I've received on this forum, I use AviSynth and Virtualdub to do most of my editing these days. Using both, most video editing procedures can be done quite easily, and more importantly, very well!

But those programs are not good at some things - like titles for example! There are Avisynth plugins that can handle simple titling needs, but they tend to be a bit cumbersome.

So, looking for an alternative way -- but still using free software -- I wondered about using HTML5 and CSS3 to create title sequences?

It's easy to edit in a text editor - like Brackets - and you can get your animated HTML and CSS3 files to run in real time in a browser, so you can alter anything pretty easily and quickly..... So far so good....

Once you've got your animated HTML5/CSS3 files as you want them, the next task is to convert them to video.

Simple enough to do, using free screen capture software like Debut or Camstudio.

What does seem to be more difficult is to stop these programs from dropping frames.
I created a short version of the Star Wars 'crawl' opening sequence using CSS3 just as a bit of fun, to see if I could do it ,only using free software.

I attempted to capture the browser window - using the free version of Debut - as a Grass Valley HQX file, and it worked quite well.
But even though neither my CPU or RAM ever 'maxed out', it still dropped frames. The only way I could get the 'smooth' crawl needed for the Star Wars sequence was to slow the CSS animation down 10 times, and then decimate the (big!) recorded HQX file to try and eliminate the effect of the dropped frames.

That works pretty well -- the 'crawl' in the attached sample file is quite smooth.... But it's a bit time consuming

I'm not sure why the screen capture software drops frames? (I tried one or two other screen capture programs, and had the same problem (only worse!)

If the CPU and RAM can handle the encoding, where is the likely cause of the bottleneck?

As I say, it's not difficult to 'decimate' the files as described, but if there's an easier way, by preventing dropped frames?.....

Using animated CSS3 is certainly simpler than trying to learn AVIUTL or Blender, which are the only other free programs I can think of that could do title animations like the Star Wars sequence.
So if the process can be made quicker by preventing dropped frames, that would be ideal..

Any ideas?......

[poisondeathray]

There are scripts you can use that that record 1:1 frames of HTML animations into an image sequence. This gives perfect results like an avs script. Screen recording is always dicey and never perfect. You always have a remote chance of dropped or inserted duplicates even on a monster computer system

eg
http://www.ultramegasoft.com/blog/2010/09/record-html-canvas-animations-to-video/

For most people, anything like this is much much easier in a GUI. CSS and avisynth or coding to do manipulations in timing / animations are brutal for most people. What if you needed to time several elements with a curve? (not just linear keyframes). I would even say hardcore programmers would find it easier to do in a GUI

But it's still pretty cool - there is a lot of things you can do with HTML5

[racer-x]

I believe ShotCut (free simple NLE) can import HTML animations directly, then you can just export as video. Check the tutorials, I think one is just for this.

I wouldn't do it this way either, but if you like it, go for it....

[jagabo]

Nice work!

[pippas]

Thanks for your comments and suggestions....

@PDR...Thanks for that idea. I can see how that PHP technique would allow for a 'perfect' capture, but would probably take even longer than using screen capture at 1/10th speed! And decimation certainly seems to produce acceptable results.
I can also see how there might be considerable restrictions on using this CSS3 animation technique for multiple critical timings.

@racer-x.... Thanks for that suggestion. Unfortunately, the NLE you suggested is only for 64 bit systems, and I'm still on 32 bit. Looks interesting though.
I'm guessing you might approach the Star Wars crawl yourself by using AVIUTL?.....I'm still very near the bottom of the 'learning curve' with that program, so I don't think I'd do very well trying to copy that sequence with any accuracy..

@jagabo.... thanks for the compliment. Most flattering from an expert! The Star Wars crawl has got to be one of the most copied sequences in history, and I have an ongoing discussion about it with my brother that goes back nearly 20 years!
His challenge to me has been to produce a reasonably accurate copy, with fully editable text (including the main logo) but only using free software. I've made several attempts over the years, but those that looked anything like the original always involved using commercial software .

This latest attempt is my first that used all free software..... It's not perfect of course, but it does hopefully look something like the original. I'm still waiting on my brother's verdict....

Thanks again to all for the ideas....

[Cornucopia]

I use BluffTitler regularly. Fairly easy, very versatile. Quirky interface though. Might be overkill.

Scott

[pippas]

I've heard some good things about BluffTitler Scott...Trouble is it's not free... so it's ruled out for this particular project.

I don't think using CSS3 and HTML would even come close to competing against commercial titlers. It was just an idea to try as part of this project - which only allowed the use of freeware tools.

All a bit silly I know. Keeps me amused!