(continue reading after the break)

Let me share with you why I thought video playback would be easy and incredible.

• Xoom resolution is 1280x800 on a 10.1" screen
• NVIDIA Tegra2 1.0GHz Dual-Core (created by the same  NVIDIA that created CUDA...)
• It runs Android (see media specs for android media playback, giant hint for the solution on this page; look at the details section for H.264 playback)
• 1080p HDMI out playback touted proudly on the internet and through sales clerks
• 720p playback support on the device screen
• Honeycomb, 3.0 baby, the show, the big win, other catch-phrases

Given the specs (especially taking the 720p device playback and the 1080p HDMI out into consideration) I would have pegged the device as a High Profile, 5.0, 5+ B-Frame, with psycho-visual enhanced, 3k-5kbps video-encoded dolby 5.1 384 kbps ACC HCv2 (yes, overkill) loving machine of pure self indulgence and immaculate beauty. Sadly, it is not.  The solution is actually the one that would keep most video encoders locked in their room scratching their heads attempting to figure out why tweaking b-frames, bitrates, and AAC vs MP3 audio encoding had zero effect on the latency, lag, and stutter that makes playback so insufferable on the Xoom - well unless they checked that giant hint I mentioned above.

Keep it (ridiculously) Simple Stupid

No, I'm not trying to be clever, I'm serious about this. Pretend that marked-up little jewel is little more than a motorola razr (ok, that may be a little much, as the razr only plays back 3gpp... but I digress). The secret to encoding for the Xoom is this; Baseline Profile 1.3, 20RF, 160kbps AAC-LC.  I'll say it again, Baseline 1.3 (think video iPod), 20RF (this one varies, but RF 20 in Handbrake is a pretty good spot), 160kbps (or less if you don't mind losing a little fidelity, you can go as low as 48 if you don't mind some ear-numbing blur, or are not an audiophile) AAC-LC (you can try the HC, but LC will probably work better, I mean I didn't test it, but you should do that later and let me know in the comments so I can strike the previous sentence ).

How do I get video from "x" encoded?

Yeah, that's a little tricky, luckily I'm going to provide you a method of getting video goodness on your Xoom, to be fair I'm going to warn you that you may need some knowledge of DVD/Blu-Ray rippery which will not be provided here. For those of you with video content that you need transcoded, if the masses cry out for help I'll post a guide on transcoding. But for the most part, this guide is still applicable to non-rippers as Handbrake will process other files and transcode them for you, in fact one of my test files was a mov file, so following this guide will probably work for you.

For those of you who wish to take the easiest of all routes, do yourself a favor and spend $10-20 on "DVD Catalyst", they have Xoom presets that does a fantastic job of kicking out your media in a very watchable fashion. You may still need a deCSS program, but even so DVD Catalyst is easy to use and was recommended on LifeHacker (note that you will probably need the paid version, not the free one).

DVD/BR-Disc to Xoom

Step 1 - Rip your DVD/Blu-Ray

Windows users, you will need a ripping program and a deCSS program, since both of those exist legally, I welcome you to acquire one. No, I will not give you one (it's against the law here and mixing it up with DMCA just isn't my cup of tea). I will tell you that you can get a "legal" deCSS utility from slysoft called "AnyDVD" and "AnyDVD HD". These apps are subscription based (yearly) and will allow you to deCSS your movies. You can also try DVD43, but that hasn't worked for me in quite a few years.

Mac users, you will need handbrake and VLC installed. If that doesn't work, try a program like mactheripper (which doesn't seem to be working for me as of late - the free version that is) or do a little googling and find the new hotness for ripping DVDs. Again I'm not posting links to these, and I'm only mentioning them by name as they are fairly well known already and they show up pretty quick in the right search on "binglehoo".

You can rip your movie to the file system as folders and vob files, or you can rip to ISO (which is my preferred method), but whatever floats-your-boat is what will work here. Once you have the DVD ripped to your hard drive we can move on. Please note that DVD rips will work, but they will look a little "soft" when played back on the Xoom, this is due to the pixel stretching, since your DVD will come off at best 480p and your screen wants to playback at 720p.  I don't believe this isn't a real problem though, just hold it a little further from your face, or buy a cradle/dock/case-stand and you are set. Blu-ray rips look amazing though, seriously, they look very nice. Kind of like the difference between viewing a video on  a superAMOLED screen and a 3rd gen iPod*.

*I'm qualified to say that - as my opinion -  since I have both a 3rd gen iPod and a Samsung Epic, and yeah, the difference is night and day crazy. Video used in comparison was a 480x320 800kbps episode of 30 Rock.

Step 2 - Open Handbrake and let's get the encoding party started

Ah handbrake, soother of mp4-related aches and pains. Encoder of happiness, weapon of choice when dealing with quick batch fire-and-forget encoding sessions. Oh and did I mention free for Linux, Windows, and Mac?

Now for those of you that know how to edit your "user_preset.xml" file you are in luck, I happen to have a Xoom preset pre-built and ready for use (lucky you!), for those of you that don't know how to do that (it can be a little tricky), I'm going to put a little screen shot in here of the preset so you can follow along.

XML preset file can be found here, just unzip the file and either replace your current xml file, or open yours and mine and add my preset to your preset node (clear as mud?). To find where your presets are kept, please visit the official Handbrake support page (it's in a different location depending on your OS)

For those of you that need a little visual aid and a walk through of the settings tabs, I have you covered:

Handbrake 0.9.5 on Windows 7

For the "Source" I picked a 1080p .mov movie trailer I happened to have lying around, ignore my naming, this screenshot was taken during testing, but after I had finalized what quality settings I recommend (the test with that naming scheme was an epic fail btw).

If you ripped a DVD to ISO, click on Source -> Video File -> movie-you-ripped.iso (yes, doing that works). If you ripped the folders, go find your rip folder and pick the video folder containing the vob files. If you don't see your show (look at the "Title" to check for length) then pick another file or try individual vob files. Next choose your" Destination" to save your file and then step through the tabs at the bottom to set your file up.

Picture tab - pretty simple, if it's a DVD, leave it alone, if it is a 1080p rip, set it to 720p (read that as 1280 x whatever-anamorphic-loose-gives-you). Yes I know Anamorphic settings will vary, but this is a quick guide not an in-depth guide into the rational of being >-.5% off on screen ratio.

Video Filters tab - remember the K.I.S.S.? yeah, leave it alone you don't need'em or want'em.

Video tab - You can play a bit on this tab, keep Video Codec at H.264, and feel free to adjust your Framerate (I keep mine at source, but sometimes I'm lazy like that), Quality is where you can go nuts, if you want a Target Size, this is the place.  If you want an Avg Bitrate I'm going to suggest 2000kbps for 720p and around 1000kbps for 480p video. However, my suggestion is to go with the Constant Quality at RF:20 setting.

Audio tab - Pretty straight forward, either leave it alone, or tweak the kbps of your audio, it should default at 160kbps AAC, but you can lower it or increase it if you want too. This can put a serious dent in file size if you are cramming it in. Also if you are going to play it back on the tinny-poorly-designed-why-on-this-great-green-and-blue-globe-we-live-on-did-they-put-the-speakers-on-the-back Xoom, then you can drop it to48-64kbps without missing hardly anything. Now if you are going to crack out your etymotic's and listen to this, then yeah, you'll wanna leave that at least 160.

Subtitles tab - I don't sub, so I can't give you guidance on this one.

Chapters tab - I always rip the whole show and nothing but the show, but if you aren't like me, feel free to make adjustments as needed.

Advanced tab - Finally the tab worth taking a screenshot of, follow the picture above. Ref frames at 3, NO B-Frames, NO CABAC, NO 8x8 Transform, NO Weighted P-Frames, and NO deblocking. You can play with the Trellis setting. I left if off for some encodes, then at Default for others. It seemed to help on some mostly black to bright (say... TRON?) videos. As you can see from the settings I wasn't kidding when I said the Xoom acts like an old school video playback device. It seems that it just takes too much power to decode mp4 files with all the bells and whistles turned on.

When you are all set with your settings just click the green "Start" button and away Handbrake goes leaving you to wait in anticipation (you may do some batch encoding if you'd like, just use the "Add to Queue" button. If you're new at this, you probably aren't going to want to batch encode yet).

After that you just need to get the file on your Xoom, for Windows XP, just plug it in and use windows explorer to dump it on the drive, for Windows 7 users, you can attempt to "sync" it through media player, but I find that just using windows explorer is much easier (but then again I've always found using the file system to move files and off much easier than GUI-driven programs).

Questions, Comments, Feedback, and Fixes

That should just about cover it, as always I welcome your comments, questions, feedback, and fixes. If anyone wants a screencast, let me know and I'll try to carve some time out and get one posted.

Open your config .xml file and find this line:

<application xmlns="http://ns.adobe.com/air/application/1.0">

See the "1.0" on the end? That's your problem, see you are probably developing with AIR 1.5 (and why wouldn't you?), not AIR 1.0. So change the line to read

<application xmlns="http://ns.adobe.com/air/application/1.5">

Save the file and relaunch/debug your app. It should run like a champ now. On the upside, maybe lynda will find this post and fix their example files. Until then, this trick should keep you going.

So I give you, jTrace - javascript tracing for the peoples (say that last part like strong-bad to get the full effect).

I coded jTrace with jQuery 1.3.2 (as an include... not so much a plugin, although that's what I usually call it), and then I created a 'bloated' version that has jQuery included inside of it (for all you mooTools and prototypers out there... I got your back ). For those who use the bloated version, yeah I coded the jQuery portion to use 'jQuery(...' instead of '$(...' for the selectors so it shouldn't break your exisiting code.

To get an in-depth approach on jTrace and how to use it, head over the 'usage' page on the jTrace site.

Have questions, comments, or props? Leave them here in the comments, thanks!

Web Developer Training - jQuery

1- Go and grab TubeMaster Plus.  This is a handy little tool that has a built in browser that lets you surf to a page and then grab any streaming video (complete with audio) from it.  While the interface is a bit clunky, it is somewhat intuitive.  It also does have a built-in "tutorial" site built into it to help you get started.  The biggest help for me was if I had been told it was a stand-alone client, meaning no IE of FF needed, just throw the link on the main page and it will use the internal browser to render the page and aquire the video.  Note that the video should come down as an FLV, you can either convert it inside TMPlus, or use your favorite software to do the encoding.

2- Go and get MediaInfo.  This is a handy little app that will tell you the bitrate, video resolution, fps, etc of any media file.  Open the FLV in MediaInfo and checkout the video bit-rate, the frame-size, and the audio encoding.  Generally I leave this window up.

3- Use SUPER to re-encode/transcode the file into a format more suitable for your use.  SUPER is a rough program to download, I'm not sure if the authors actually enjoy torture, or just can't build a web-page to save their own life, so instead of grabbing it at the offical source, grab SUPER from somewhere trustworthy, like AfterDawn.com (yes the site name sounds like it could be naughty, but it's not, they've been on the scene with video encoding since just about the birth of AngelPotion, and if you got that reference, you just gained a little of my respect ).

4- When SUPER is done encoding, enjoy your video.  A simple solution to your video ripping problems.

Other sites/tools you can use to aquire your favorite online videos.

• YouTube Ripper (webservice) - Just paste the YouTube link in the box and then right-click and save the flv.
• LiveHTTPHeaders - (Firefox plugin, manual, and painful)
• Fiddler2/httpspy - (IE plugins, manual, and painful - note that httpspy has become difficult to find... extremely difficult to find, and there is another program out in the wild that is NOT the same.  Consult the Ninja on the offical version)

If you need pictures I can create an actual Developer Training (with a minisite), but for now, I'm hoping the text will do.  If you have questions or need more examples etc.  Leave a comment and I'll get on it.

Let me know if there are bugs to be fixed, or if you have anything you'd like to add.

Web Developer Training: Compression

Developer Training - Sprites (sponsered by Team Awesome)

Enjoy, and feel free to drop a comment or two

Highlights:

• Rational debugging mode
• Firebug (for both CSS editing and javascript debugging)
• Drew's fantastic commentary as nothing works the way he intends (for the first 20-ish minutes)
• My extremely long pause... that I think I may still be on.

On a side note, there are two other tools that are very helpful when trying to debug or develop on IE, Safari, Linux browsers, etc. They are XRAY and Aardvark, and both are bookmarklets (meaning you bookmark the javascript itself and run it when you need it, similar to a bookmark).

XRAY can be found here http://www.westciv.com/xray/.

Aardvark can be found here http://karmatics.com/aardvark/bookmarklet.html.

Audio clip will be here when I'm done editing it...  UPDATE: Or it won't, looks like my sansa destroyed the file, I mean it's still there, just not in a format that any program can read...  I may still play with this, but I'm thinking it's a lost cause... sorry

<table class="standard-table" cellspacing="0">
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
		<th>Column 4</th>
	</tr>
	<tr class="lightrow">
		<td width="60">Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="darkrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="lightrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="darkrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
	<tr class="lightrow">
		<td>Value 1</td>
		<td>Value 2</td>
		<td>Value 3</td>
		<td>Value 4</td>
	</tr>
</table>

Also note, that WordPress absolutly destroys any layout and aligns everything to the left (argh!) Anyway, pressing on, here is a From Table, again well thought out and designed correctly.

<table class="form-table" cellspacing="0">
	<tr>
		<td rowspan="2" class="description">Name:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description"> </td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">City:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">State:</td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td class="description">Zip Code:</td>
		<td><input type="text" value="" /></td>
	</tr>
</table>

Now if you find yourself wishing you could see the original files, well you can. Simply grab them from here. Also, if you happen to have your "Bulletproof Web Design" by Dan Cederholm handy you can flip to page 153 and start reading there.  I'd also post some css, but the post is getting rather lengthy as is so just grab the zip file to see the fully stylesheet.

And now the part you've been waiting for ...
The audio from the training.