h1

Embedded video of arbitrarily good quality

January 21, 2008

Vista busy cursor 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.

AddThis Social Bookmark Button

Advertisements

15 comments

  1. I really appreciate the Vodpod service. Without you guys I wouldn’t be able to do any of this stuff.


  2. I have hosting with ffmpeg for video blogs check it out you might find something there you need.


  3. I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.


    • Glad you like the blog. I’ve not added much recently but will be doing more on the iPhoneless Life series shortly.


  4. Yep, it’s pretty straightforward. I managed to halve the size by changing that parameter with no noticeable change in quality. I’m loving this!


  5. That’s as good a start as any. Thank you, Dennis. I’ll report back on that earlier question about changing the parameters.


  6. I don’t claim any special expertise on use of the ffmpeg encoder, Jamie. You’re best off having a play with the options and seeing the effect on quality and file-size.

    If you want to refer to the official ffmpeg documentation it’s here but it’s somewhat dense.


  7. I have only just discovered blip and I love it, it’s the way forward for me. I followed your guide and it is spot on, I’m really impressed. Thank you.

    One thing: I converted a 4.5 minute .avi that was just shy of 1Gb. The Flash movie, after your conversion, ended up being 45Mb, which is still pretty large. I would appreciate a blow-by-blow definition of each parameter in the video.bat and .avs file. For example, if I change 1500kb to 750kb, will I effectively halve the outputted file size? I’m trying this now so I’ll answer my own question shortly (!) but if I missed it perhaps you could point me to where the definitions are so I know what I’m changing?

    Once again, thank you.


  8. I have hosting with ffmpeg for video blogs check it out you might find something there you need.

    Hosts Gate – Hosting – Reviews – Top 10 Hosts


  9. You are very welcome, Mike. Appreciated.


  10. Thanks very much for this guide. I found it worked very well (once I changed the first line in video.avs to the absolute path of the plugin). The quality is still no where near as good as the capture from the camera, but it blows YouTube and Blogger’s conversions out of the water. Cheers!


  11. Thanks. I did know that and had mentioned it here.

    On2 VP6 is not though readily available to use with the official version of ffmpeg. I have seen a specially patched version of ffmpeg which supports VP6 but have not yet had the time to try it out.


  12. Don’t you know Flash VP6-s codec is the best quality at lowest bit rate.


  13. Cheers, Scott. Much obliged to you.

    I really appreciate the Vodpod service. Without you guys I wouldn’t be able to do any of this stuff.


  14. Man – that is sweet! I’ve used Blip before, and I really like their service. I didn’t realize they would serve the flv file directly if you upload it to them. That’s very cool.

    Btw, I’m working on the autoplay problem with the Post to WordPress button.

    –Scott
    vodpod.com



Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: