Convert Video and Audio for HTML5 with avconv

Convert Video and Audio for HTML5 with avconv

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.

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.

For the rest of you, visit 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).

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.

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).

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.

shocked just shocked

Video Encoding

The following table outlines the various media containers and codecs we need for our video element to work properly.

ContainerVideo CodecAudio Codec

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.

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.

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.

Audio Encoding

The following table outlines the various media containers and codecs we need for our audio element to work properly.

ContainerAudio Codec

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.

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.

Aside from some quirks with quality settings, converting videos with avconv is a snap. If you ever get lost, check the libav wiki ( for help.

Convert Video and Audio for HTML5 with avconv was posted by on . JR is one of the three humans that run the behind-the-scene affairs of The Hello World Program. He is interested in spreading the good robot word over the vast Inter-webs. His contributions to the show include editing, web programming, design, and music composition.

Discuss this article in the Comments below, or and it with your friends. Learn more about Web Development by subscribing to The Hello World Newsletter .

Join the Discussion
  • flowereyess

    Have you tried Avdshare?

    It will show you a step by step
    guide on how to find and download the right ogv to mp4 videos as well as add ogv to MP4. In fact, this
    guide also applies to add subtitles to AVI, MKV, WTV, WMV, VOB, MPG, MOV, DV,
    FLV, WebM, OGV, and etc.

Subscribe to our Mailing List

Stay up to date on the latest videos and tutorials with our monthly newsletter

The email entered is invalid

Want to Learn HTML?

Master the essential web language with our free 10 day course. Get entertaining web development classes emailed directly to your inbox.

The email entered is invalid