We talked briefly about the various formats needed to embed video and audio in a web page in the previous tutorial, HTML5 Audio and Video Media Players. To satisfy as many modern browsers as possible, we have to encode our media in multiple formats. There are dozens of codecs and containers for audio and video. Each container can contain many different types and combinations of codecs.
TIL HTML J4F, And So Can You!
Read Convert Video and Audio for HTML5 with avconv and 16 other revised and expanded HTML tutorials on the go with our convenient E-book (available in PDF, EPUB, and MOBI).
Learn how to build a game board with the table element, make sandwiches with forms, conquer dragons with semantic elements, link to exotic locations, and build up a robot's self esteem with structural markup in this beginner friendly introduction to the essential web development language.
Download the Complete E-book Now!
We’ll be using a super amazing audio and video conversion program called avconv. It’s a command-line utility available for Linux, Mac, and Windows. Be not afraid of the command line, avconv is actually quite easy once you get the hang of the syntax.
If you don’t have avconv installed and you are fortunate enough to be running a Linux distro with the apt package manager, open up terminal and type in the following command.
sudo apt-get install libav-tools
For the rest of you, visit www.libav.org/download.html for installation instructions.
Basic avconv Syntax
Avconv is pretty smart. It can guess most parameters based on information it scrapes from your input file and the file extension of your output file. Because of this, the only parameters you absolutely must have in an avconv command are input file and output file. The input file is specified with the -i flag, and the output file is the very last parameter (no flag necessary).
avconv -i quickfox.mkv quickfox.mp4
For web audio and video, it is critically important to use the right combination of containers and codecs. If we let avconv do the guesswork, it may make the wrong assumptions about our output file. We can tell avconv exactly what codecs to use with the -c:a and -c:v flags for audio and video respectively.
avconv -i quickfox.mkv -c:a libvorbis -c:v libx264 quickfox.mp4
Seeing as most devices are capapable of recording 1080p video, there’s a good chance you will want to scale your video before putting it in your website. We can specify any size we want with the -s:v flag, but avconv comes with several presets. Of these, the ones I find useful are hd480 (852×480), hd720 (1280×720), and hd1080 (1920×1080).
avconv -i quickfox.mkv -s:v 852x480 quickfox.mp4
avconv -i quickfox.mkv -s:v hd480 quickfox.mp4
One last thing to consider is the output quality for our media. avconv defaults to medium or low quality output depending on the codec, so it’s a good idea to override the quality settings to meet your desired result. This is where avconv gets confusing, because every codec handles quality settings a little differently.
The following table outlines the various media containers and codecs we need for our video element to work properly.
Encode an mp4 video with x264 and aac
Lets focus on the mp4 container first. We need to use the x264 and aac codecs. x264 is the open source equivalent of h264, possibly the most popular video codec around. Unless you compiled avconv yourself, you probably don’t have a (stable) aac encoder. No problem, there is an “experimental” aac encoder built in that works just fine, but we have to tell avconv it’s okay to use it with the -strict experimental flag.
Quality of the video is set with the -crf flag and quality of the audio is set with the -b:a option. The -crf option accepts a value from 0 to 51 where 0 is lossless, 23 is default, and 51 is total rubbish. A value of 18-28 is considered “sane” with 18 being “visually lossless”. The -b:a option accepts a bitrate value. Bitrate is a bit outside the scope of this tutorial, but suffice it to say that 128k, 256k, and 320k are considered low, medium, and high quality respectively. See what I mean about conversion quality being confusing? That’s not even the worst of it.
avconv -i quickfox.mkv -c:v libx264 -crf 28 -c:a aac -b:a 256k -strict experimental quickfox.mp4
Encode a webm video with vp8 and vorbis
One down two more to go. Next up, a webm video with vp8 and vorbis codecs. The vp8 codec is similar to x264 in that it accepts a -crf option with a range of 0-63 (0 being best quality and 63 being unwatchable). To get the best results with vp8, we also need to set the -b:v option. This is the target bitrate for the video in megabytes (M) or kilobytes (K). A higher value will generate a higher quality video. For our vorbis codec, we need to set the -qscale flag to a value in the range of 0-10, where 10 is best quality.
avconv -i quickfox.mkv -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis -qscale:a 7 quickfox.webm
Encode an ogv Video with theora and vorbis
Our final video will use the ogv container with theora and vorbis codecs. Theora is pretty straightforward. Like the vorbis codec, we just need to set the -qscale:v option to something in the range of 0-10 with ten being the highest quality and 5-7 considered a good starting point.
avconv -i quickfox.mkv -c:v libtheora -qscale:v 7 -c:a libvorbis -qscale:a 7 quickfox.ogv
The following table outlines the various media containers and codecs we need for our audio element to work properly.
Encode an mp3 Audio File with libmp3lame
We could explicitly tell avconv to use the libmp3lame codec with the -c option, but it’s really not necessary. The program will assume that you want to use that codec based on the file extension of the output file. So all we need to specify the quality. We can set the bitrate exactly with the -b option, but this is considered wasteful because -qscale with a value of 0-3 produces “transparent” results. Here’s a bit of a challenging quirk: the -qscale option for mp3 files accepts a value of 0-10 where 0 is high quality and 10 is low quality.
avconv -i foxsays.flac -qscale 3 foxsays.mp3
Encode an ogg Audio File with libvorbis
Encoding an ogg audio file is the same as encoding an ogv video file. Again, we could specify the libvorbis codec with the -c option, but we’ll let avconv work its magic again and choose the codec based on the output file extension. That means all we need to set is the -qscale option. Remember that -qscale for ogg works opposite of mp3. It accepts a range of 0-10 where 10 is the highest quality and 0 is the lowest quality.
Avconv -i foxsays.flac -qscale 7 foxsays.ogg
Aside from some quirks with quality settings, converting videos with avconv is a snap. If you ever get lost, check the libav wiki (wiki.libav.org) for help.