Ogg-Theora video is the open source codec supported by Firefox, Chrome, and Opera to play HTML5 video. If the world were perfect, and all browsers supported Ogg Theora this would be the HTML code to play this simple HTML5 video demo:
<video src="Videos/cat.ogv" controls></video>
If you use this format instead, you will be ready to add the code to play H.264 and Flash:
<video width="320" height="240" poster="Videos/cat.jpg" controls> <source src="Videos/cat.ogv" type"video/ogg"> </video>
where “poster” is the image used while the video is loading, “width” and “height” refer to the video dimensions, and “controls” adds the native video controls. The Dev Opera site has information on other attributes and also how to script your own controls.
You can convert nearly any video codec into Ogg Theora using either Firefogg, an add-on for Firefox or ffmpeg2theora. These work in all operating systems.
Dive into HTML5 and Theora Cookbook both have detailed explanations of how to encode Ogg video with Firefogg.
Ffmpeg2theora is a command line application, but it is easy to use. If you use Linux it is probably available in your repositories. If you use MacOS X or Windows, you can download and install ffmpeg2theora.
The cat video in the demo was taken with an inexpensive camera; the video from the camera was .mov format. To convert it to Ogg Theora, use the command:
ffmpeg2theora cat.mov -o cat.ogv
where cat.mov is the input file and -o means that you are writing to an output file named cat.ogv.
You can also change the video quality and the view size of the video; both of these affect the size of the output file. For instance, using the command:
ffmpeg2theora cat.mov -v 5 -a 2 -x 320 -y 240 -o cat.ogv
-v is the video quality; 5 is the default; smaller numbers are lower quality
-a is the audio quality; 2 is the default; again smaller is lower quality
-x is the desired width of the output video
-y is the desired height of the output video
There are other parameters that can be used as well. Theora Cookbook and It Came from the Internet have more examples.
Leave a Reply