HTML5 video plays in chrome but not IE9

Question

I've tried every concoction you can find on the internet and here on SO with regard to encoding, htaccess, and video element markup but I cannot get these videos to play in IE9 while they work perfectly in Chrome. Does anyone know the magic fairy dust to get this to work? All that shows in IE is a black box with the red x in the center. Here is a link to the test page: (link removed)

Note that I show two videos and two variations of the markup. One is a direct copy from Mark Pilgrim's book for the video type. The first video was encoded using miro. The second with ffmpeg. I do include 'AddType video/mp4 .mp4' in my htaccess in that video directory.

It's never mattered what I've tried or which combinations of presets for ffmpeg, nothing seems to work. I am NOT interested in hearing suggestions about javascript libraries or any other libraries.

EDIT1:

After seeing a test page by @heff below, it appears my problems may be related to my host, HostGator, who's support team has given me the brush off that they don't support web design efforts using HTML5. I also have issues with HTML5 audio in IE9 using audio and markup that works in other browsers and from other web hosts. I don't know that my problem is host related but I am inclined to believe so and will be looking into testing with other hosts.

I see a lot of similar questions to mine on the internet and here at SO and I'm wondering if they are having the same host issues as me.

EDIT2:

I put the videos on a local server in my office along with the exact same web pages using Apache and FreeBSD (HostGator uses Centos). The videos play just fine in IE9.

EDIT3: So I got "Uncle Buck Bunny" to work. It's a well known MP4 I downloaded. Why it works, I don't know, but I used the same encoder they did, I think. They must possess that magic fairy dust no on else has.

EDIT4: Can anyone copy one of my videos and the markup and make it work on their non-HostGator host?

EDIT5: So it appears IE9 is downloading the mp4 videos but just not playing them or showing the controls while displaying a red 'x'. I originally thought the videos were not being downloaded at all from the their dev tools was showing me. Still lost as to what to do. I DO see a flash of the controls when I reload the page.

EDIT6: Solved The solution, as I implied elsewhere, is in the encoding. What is different, I do not know, but I got this working using an encoding method using ffmpeg. The encoding is shown in my answer below.

As I also stated, no other browser has an issue with what I was using.

Answer 1

EDIT: As stated in my edited question above, I found the solution. The following works only if you put it in the order shown:

ffmpeg  -i <infile> \
        -vcodec libx264 -vpre normal \
        -acodec libfaac \
        -threads 0 <outfile>.mp4

Original answer:

I've spent weeks trying to get this to work to no avail. Searching the web I see countless others struggling with this, too. I've not been able to find one person who can get this to work and show how it was done (except with a special tool as @heff used here).

I am unable to find any responses from Microsoft on their own forums and articles. There is nothing I could find regarding encoding that could be causing the issue. I find countless threads started in forums that end the same way...no solution.

So the answer is simple. IE9 is broken. But we all already know that. Inept at best, it's the worst browser on the planet. While Microsoft claims it can handle video files such as this, it fails to do so while other browsers have no issues whatsoever.

So unless someone comes along and provides guidance, I will accept this answer as the best answer because it is. Surely Microsoft can't or won't provide a better one.