Embedded video of arbitrarily good quality

I’ve cracked it! I now have a way to embed video in blog posts where the video quality is as good as I want it to be, by doing the encoding to Flash video format myself and then uploading to blip.tv (details later).

Bear in mind, there are limits to how good you really want your embedded video to be. Exceptional quality means very high bitrate. By bitrate I mean the average amount of data in bits that your computer needs to have delivered to it every second during playback so that it can keep displaying the next second of video footage. High quality video means more data to represent each frame, hence higher bitrate. If the bitrate is way over the rate at which data can be streamed over the viewer’s broadband connection then playback will keep stopping and starting while the data transfer over the Internet struggles to catch up.

Even if the broadband speed is up to the task, the viewer’s computer may not be. High bitrate video requires that much more computing power to render it in real time without dropped frames or visual distortions. More recent dual core computers are likely to cope, but older machines may flounder.

Where to set the quality target depends on what your priorities are and who is likely to be watching your videos. I’m interested in using my blogs to display videos from my travels and suchlike, for the benefit of family, friends and anyone else who may be interested, following the principles set out in a previous post. In that sense, I’m using the Internet as an alternative to entrusting my travel videos to DVD. As such, I am more bothered about quality than if I were posting some trivial tosh to YouTube. I would expect such of my family and friends who wished to look at my snippets of video to be prepared to wait on pause for a minute or two while the download process built up a head start, so they could enjoy uninterrupted playback.

My objective is to embed decent sized video (in this case 448 x 336 to fit sensibly on a blog) so that it looks sharp and plays back with an absolute minimum of compression artifacts such as “macroblocking” or “mosquito noise”.

I used to think that the trick to good quality Internet video was high quality encoding of the source DV material before uploading to a video sharing website such as YouTube. Sadly, you can create a wonderful quality H.264 MPEG4 file (possibly using the method I described in an earlier post) but when you upload it to YouTube it gets re-encoded automatically to Flash video format, with compression settings geared to ensure it plays back instantly and without stops and starts, very much at the expense of quality. In particular it forces a resolution of only 320 x 240, very infrequent keyframes (i.e. fully rendered frames as opposed to “difference” frames), and a modest bitrate of around 320 kbps. The details of YouTube encoding are here.

Let’s look at an example. This is a minute of video my wife shot at a market in Dalian, China. I used my H.264 process to create a high quality .mp4 file, around DVD standard, and uploaded to YouTube.

This is the result:

Vodpod videos no longer available.

The alternative is to encode to Flash format directly yourself, using the quality settings that suit your needs, then upload to a video website such as blip.tv which does not re-encode your video file, whatever the bitrate, if it is already in Flash format. This is what you get using a resolution of 448 x 336 and a bitrate of around 1500 kbps:

Vodpod videos no longer available.

Not only is the video quality far better (close to DVD standard), but we’ve improved the sound by retaining stereo. For most people, the better quality comes at the price of video that keeps stopping. Given the limitations of my broadband, I find if I pause for a couple of minutes while the data downloads ahead, then rewind to the beginning and restart playback it then plays straight through to the end. I don’t have to wait if I want to play the video again as the video data is then cached.

Now to the details of how to encode the video in Flash format. Start with the setup described here, in particular the videoenc folder, AviSynth and Smooth Deinterlacer. You don’t need MPlayer, x264, MP4Box and faac. You do though need ffmpeg and you can get the latest Windows binary from here. Copy the ffmpeg.exe file to the C:\videoenc folder.

You still need a video.avs file, exactly as described, including the deinterlacing (assuming your source is DV) and resizing. You also need to create a batch file to control ffmpeg, which will encode your Flash file for you.

To do that create another file called video.txt in the videoenc folder. Open it and copy the following text into it (but where you see “>>” that means you should continue on same line):

@ECHO OFF
ffmpeg -i video.avs -pass 1 -ab 48k -ar 22050 -ac 1 -vcodec flv -b 1500k >> -g 200 -cmp 3 -subcmp 3 -mbd 2 -flags aic+cbp+mv0+mv4+trell video.flv
ffmpeg -i video.avs -pass 2 -ab 48k -ar 22050 -ac 1 -vcodec flv -b 1500k >> -g 200 -cmp 3 -subcmp 3 -mbd 2 -flags aic+cbp+mv0+mv4+trell -y video.flv
PAUSE
CLS
EXIT

Close it, saving the changes. Change the filename to video.bat.

If you double-click video.bat to run it a black DOS box will appear, ffmpeg will run (in two passes) and save your encoded flash video in a file called video.flv. If you create the batch file exactly as shown above you will get a bitrate of 1500 kbps and a gap between keyframes (Group of Pictures or GOP) of up to 200 frames. You can change those options by changing the “-b” parameter (in both lines) to modify the bitrate, and the “-g” parameter for the GOP.

Once you have your video.flv file you can upload it to your blip.tv account. Because the file you are uploading is already in Flash video format blip.tv will not re-encode it, even if you chose a very high bitrate.

As my blog is hosted on WordPress.com, I have limited options for embedding the final video, as hosted on blip.tv, in my posts. In practice I use Vodpod, as described here. Apart from everything else, it gives you precise control over the width and height of the video as displayed. I use the Vodpod “Post to WordPress” bookmarklet in Firefox to create a new post with the video embedded. I then copy the Vodpod string (something like [vodpod id=ExternalVideo.nnnnnn&w=448&h=365&fv=] ) to wherever I want it. If I want the video to appear in its “native” size, I enter its native width in the “w” parameter in the Vodpod string and its native height plus 29 in the “h” parameter. The extra 29 pixels are for the height of the control bar, which is included in the total.

That’s all there is to it.