Here are some commandline calls for libav avconv in order to convert a video file into the various needed formats to be included as a html5 video via the video tag.

For older (very old?) smartphones, a 3gpp format is needed:

avconv -i "input.mp4" -vf yadif -r 15 -s 320x180 -c:v mpeg4 -b:v 170k \
    -maxrate:v 192k -bufsize:v 50k -pass 1 -an -f mp4 /dev/null -y
avconv -i "input.mp4" -vf yadif -r 15 -s 320x180 -c:v mpeg4 -b:v 170k \
    -maxrate:v 192k -bufsize:v 50k -pass 2 \
    -c:a aac -b:a 24k -profile:a aac_low -ar 16000 -ac 1 -strict experimental \
    video-mpeg4-320x180.av.3gp -y

This does a 2-pass encoding and tries to achieve a 192k bitrate. It uses mpeg4 for video and aac for audio. The input video is deinterlaced via the “yadif” video filter. Note: Due to an older version of libav I have to enable aac by using “-strict experimental”.

avconv -i "input.mp4" -vf yadif -r 15 -s 480x270 -c:v libx264 -profile:v baseline \
    -b:v 700k -c:a aac -b:a 64k -profile:a aac_low -ar 44100 -ac 1 \
    -strict experimental video-h264-baseline-480x270.av.mp4 -y
qt-faststart video-h264-baseline-480x270.av.mp4 video-h264-baseline-480x270.ft.mp4

This converts the video in one pass using a h264 codec and aac for audio. It uses the baseline profile, so that it is supported by most smartphones. The last step is, to enable faststart, so that the video can be played, while it is still downloaded or streamed.

avconv -i "input.mp4" -vf yadif -r 25 -s 720x404 -c:v libx264 -profile:v main \
    -b:v 2000k -c:a aac -b:a 128k -profile:a aac_low -ar 44100 -ac 1 \
    -strict experimental video-h264-main-720x405.av.mp4 -y
qt-faststart video-h264-main-720x405.av.mp4 video-h264-main-720x405.ft.mp4

Next bigger version: It already uses the main profile of h264 and 128kbit for aac audio.

avconv -i "input.mp4" -vf yadif -r 25 -s 720x404 video-vp8-720x405.webm -y

This creates a webm version, which is needed for the Opera browser.

avconv -i "input.mp4" -vf yadif -r 25 -s 1920x1080 -c:v libx264 -profile:v high \
    -b:v 5000k -c:a aac -b:a 192k -profile:a aac_low -strict experimental \
    video-h264-high-1920x1080.av.mp4 -y
qt-faststart video-h264-high-1920x1080.av.mp4 video-h264-high-1920x1080.ft.mp4

This last conversion creates a HD version of the video with a small bitrate of 5MBits.

The inclusion of the video is as simple as adding these html tags:

<video controls preload="none">
    <source src="video-mpeg4-320x180.av.3gp" type="video/3gpp">
    <source src="video-h264-baseline-480x270.ft.mp4" type="video/mp4">
    <source src="video-vp8-720x405.webm" type="video/webm">
    <source src="video-h264-main-720x405.ft.mp4" type="video/mp4">
    <source src="video-h264-high-1920x1080.ft.mp4" type="video/mp4">
</video>

Now the browser picks the first video format, it supports.

If you integrate videojs and its plugin resolution switcher you can let the user select the quality of the video.