Inconsistent behaviour of HTML 5 video across desktop browsers - html

Question

Someone I know has asked that I convert the videos on his webpage from using FlowPlayer to using native HTML 5 video.
To start off, I read that 3 formats are sufficient to cover the main desktop browsers (Chrome, Firefox, IE and Opera). Starting from .avi, I used Miro Video Converter to get videos in .mp4, .ogg and .webm as can be seen here:
To further help with cross-compatibility, I decided to use VideoJS.
The mark up seemed straightforward too:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="500px" height="300px"
poster="something.png">
<source src="something.mp4" type="video/mp4" />
<source src="something.webm" type="video/webm" />
<source src="something.ogv" type="video/ogg" />
</video>
Here was what I found on the browsers (latest versions of all):
Google Chrome v30.0: no problems whatsoever. It picked .mp4 which was the highest quality of the three formats. Great.
Opera v12.16: again, and a little surprisingly, no problems. Same behaviour as Chrome.
IE 11: It's all downhill from here. IE 11 waits for the entire video to finish buffering and then starts playing only audio. So it was audio + the poster.
Firefox v24.0: Unlike IE, it doesn't wait for the entire video to buffer but like IE, it plays only audio and no video. I read somewhere that Firefox does indeed support .mp4 playback as long is it is a Windows 7 or higher OS. I am using Windows 8.
I then did some reading up on Apache. The headers stated that Firefox and IE were both recognizing the mp4 as just that as opposed to some other MIME type. Even so, I added the following to my .htaccess:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
That didn't make a difference.
I then swapped the order of the source tags so that the .ogv video came first. Now, the video played in Firefox too but the .ogv is not nearly as high quality as the .mp4.
The page in question is this: http://keyrecords.com/Artist%20Pages/haggard.html
I am linking to the page above for illustration purposes only. On the page above, .ogv comes first, so yes, I know it plays in Firefox.
So my question is this: what do I need to do to get Firefox and IE 10/11 to play the .mp4? It is safe to assume that these are the latest version of each of the browsers running Windows 7/8 machines.
EDIT: MediaInfo gave me this information about the file (does it look right?):

Answer 1

I managed to solve the issue by using the HandBrake converter.
I gave it the existing .mp4 and asked it to give me a new .mp4 with the following specs:
This new .mp4 works in all 4 browsers without issues :)
Something about the way Miro Video converter converted the files caused IE and Firefox to see the audio track only but not the video track. This was rectified by reconverting using HandBrake converter.