1) Prepare the video files.
ffmpeg -i input.mpg -vcodec libxvid -q:v 5 -s 640x480 -aspect 640:480 -r 30 -g 300 -bf 2 -acodec libmp3lame -ab 160k -ar 32000 -async 32000 -ac 2 -pass 1 -an -f rawvideo -y /dev/null
ffmpeg -i input.mpg -vcodec libxvid -q:v 5 -s 640x480 -aspect 640:480 -r 30 -g 300 -bf 2 -acodec libmp3lame -ab 160k -ar 32000 -async 32000 -ac 2 -pass 2 output.mp4
qt-faststart output.mp4 output_quickstart.mp4
ffmpeg -i output_quickstart.mp4 -acodec libvorbis -vcodec libtheora -ac 2 -ab 96k -ar 44100 -b 819200 -s 640x480 -f ogg output.ogv
ffmpeg -i output_quickstart.mp4 -c:v libvpx -b:v 1M -c:a libvorbis output.webm
2) Add these MIME types to your .htaccess file:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
3) Determine dimensions of image. Add html code:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="output_quickstart.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="output.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="output.ogv" type='video/ogg; codecs="theora, vorbis"' />
You are using an old browser that does not support HTML5 video!
</video>
4) video arguments:
* autoplay lets the video start immediately
* preload start to load video file when page is loaded
* controls add play, pause and volume controls