How to create an HTML5-compatible video from png files

This is a fast guide with some basic options.
For more information refer to the following websites:
https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats
http://www.ffmpeg.org/
The guide has been tested using Debian GNU/Linux.

Step 1: Install ffmpeg and theora software

(sudo) apt-get install ffmpeg libtheora-bin (for Debian/Ubuntu)

Step 2: Create the video using theora codec

ffmpeg -r 2 -i %04d.png -y -s 380x380 -vcodec libtheora -pix_fmt yuv420p video.ogg

-i : png input files (%04d means that the files follow a sequence of 0001.png, 0002.png etc.)
-r : Frames per second
-y : Overwrite output files without asking
-s : Frame size (width x height)
-vcodec : name of the codec (other codecs are also supported but theora is the most compatible one)
-pix_fmt : pixel format
video.ogg : output file (make sure it has an ogg extension)

Step 3: Create an HTML5 video element

Example with a basic format:

<video id="video" width="380" height="380" controls>
<source src="video.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License