Tools

I'm using ffmpeg to convert the video's. To create the animated gif you'll need gifsicle or convert (from ImageMagick).

mp4 (H.264 / ACC)

ffmpeg -y -i src.mov -vcodec libx264 -pix_fmt yuv420p -vprofile high -preset fast -b:v 500k -maxrate 500k -bufsize 1000k -vf 'scale=trunc(oh*a/2)*2:480' -threads 0 -acodec libvo_aacenc -b:a 128k src.mp4

webm (VP8 / Vorbis)

ffmpeg -y -i src.mov -vcodec libvpx -quality good -cpu-used 5 -b:v 500k -maxrate 500k -bufsize 1000k -vf 'scale=trunc(oh*a/2)*2:480' -threads 0 -acodec libvorbis -f webm src.webm

jpeg

Create a screenshot at 0 seconds (the -ss parameter)

ffmpeg -y -i src.mov -ss 0 -vframes 1 -r 1 -vf 'scale=trunc(oh*a/2)*2:480' -f image2 src.jpg

Animated gif

mkdir /tmp/gif/
ffmpeg -i src.mov -r 10 -vf 'scale=trunc(oh*a/2)*2:200' /tmp/gif/out%04d.gif 
gifsicle --delay=10 --loop -O3 --color-method median-cut /tmp/gif/*.gif > src.gif

Animated gif (alternative / better quality)

ffmpeg -i src.mov -r 10 -vf 'scale=trunc(oh*a/2)*2:200' /tmp/gif/out%04d.png 
convert -delay 1x10 /tmp/gif/*.png \
      -fuzz 2% \
      +dither \
      -coalesce -layers OptimizeTransparency \
      +map animation.gif

Original conversion for the animated gif: http://blog.room208.org/post/48793543478
Original blogpost for the mp4/webm/jpeg: http://blogs.visigo.com/chriscoulson/encode-h-264-and-webm-videos-for-mediaelement-js-using-ffmpeg/