We look at how to add HTML 5 video to your website
In keeping with Theora's free-and-open promise, the tools for creating Theora videos are available free of charge across multiple platforms.
An interesting place to start is the Firefogg extension for Firefox, which lets you use Firefox 3.5 and up as a front end for a Theora video converter. Feed it a video file, set a few basic options, click Save, and the conversion takes place in the browser as you watch. Be warned that the program is picky about the file format you provide: The .mov files that came from my digital camera had to be converted into .avi before they could be used. Firefogg also trades convenience for power: It's easy to use, but you can convert only one file at a time.
A more powerful but less convenient tool is the ffmpeg2theora command-line encoder utility. It's more powerful in that it gives you complete control over the encoding parameters, less convenient in that you have to supply a whole slew of switches to the program to work it. Your best bet is to use a front end of some kind, such as Theora Converter, which allows you to batch-process files and see the most important options at a glance (but be warned - it's still in alpha). The above-mentioned Handbrake also exports to Theora.
Finally, if you use programs that export through DirectShow filters, xiph.org has a DirectShow Theora filter in both 32- and 64-bit implementations.
Because WebM is still very new - especially in its current no-licence-fee incarnation - the tool set isn't as polished as it is with Theora or H.264. The WebM project's website lists only a few basic tools, including a DirectShow filter for Windows and a stand-alone command-line encoder called makeWebm. It's important to realise that WebM is subject to further refinement and improvement, and therefore these tools are likely to undergo refinement as WebM itself is changed.
(Incidentally, the just-released beta 1 of Firefox 4.0 supports WebM playback. Try it out for yourself: Go to www.youtube.com/html5, click 'Join the HTML5 Beta', and add '&webm=1' to any search to look for WebM-encoded videos.)
NEXT PAGE: Using the < video > tag