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.

Answer 2

Nothing stood out to me in the mediainfo results, so I ran it through Zencoder, and the result works for me in IE9. (First is Zencoder, second is your original)

http://www.steveheffernan.com/test/11811992/test.html

FULL DISCLOSURE: I co-founded Zencoder. And Zencoder is not a free service, or meant for one-off video encodes. It's meant for automating encoding through the API.

That out of the way, that leads me to believe there could be some corruption in the file that IE9 can't handle. Zencoder fixes a lot of potential corruptions and forces certain compatibilities. You might also try Handbrake, but that also just uses FFmpeg/x264 afaik.

In Zencoder I used the request builder and didn't change any of the default settings.

{
  "input": "http://spartantheatre.org/video/test1.mp4"
}

Here's the mediainfo results of your test1.mp4 if you want to inspect further.

$ mediainfo test1.mp4 
General
Complete name                    : test1.mp4
Format                           : MPEG-4
Format profile                   : Base Media
Codec ID                         : isom
File size                        : 21.6 MiB
Duration                         : 2mn 14s
Overall bit rate                 : 1 348 Kbps
Writing application              : Lavf53.13.0

Video
ID                               : 1
Format                           : AVC
Format/Info                      : Advanced Video Codec
Format profile                   : [email protected]
Format settings, CABAC           : No
Format settings, ReFrames        : 1 frame
Codec ID                         : avc1
Codec ID/Info                    : Advanced Video Coding
Duration                         : 2mn 14s
Bit rate mode                    : Variable
Bit rate                         : 1 200 Kbps
Width                            : 480 pixels
Height                           : 320 pixels
Display aspect ratio             : 3:2
Frame rate mode                  : Constant
Frame rate                       : 29.970 fps
Color space                      : YUV
Chroma subsampling               : 4:2:0
Bit depth                        : 8 bits
Scan type                        : Progressive
Bits/(Pixel*Frame)               : 0.261
Stream size                      : 19.1 MiB (89%)
Writing library                  : x264 core 118 r2085 8a62835
Encoding settings                : cabac=0 / ref=1 / deblock=1:0:0 / analyse=0x1:0x111 / me=umh / subme=8 / psy=0 / mixed_ref=0 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=0 / threads=3 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=0 / weightp=0 / keyint=250 / keyint_min=25 / scenecut=40 / intra_refresh=0 / rc_lookahead=50 / rc=abr / mbtree=0 / bitrate=1200 / ratetol=1.0 / qcomp=0.60 / qpmin=10 / qpmax=51 / qpstep=4 / vbv_maxrate=10000 / vbv_bufsize=10000 / nal_hrd=none / ip_ratio=1.40 / aq=1:1.00
Language                         : English

Audio
ID                               : 2
Format                           : AAC
Format/Info                      : Advanced Audio Codec
Format version                   : Version 4
Format profile                   : LC
Format settings, SBR             : No
Codec ID                         : 40
Duration                         : 2mn 14s
Bit rate mode                    : Variable
Bit rate                         : 150 Kbps
Maximum bit rate                 : 160 Kbps
Channel(s)                       : 2 channels
Channel positions                : Front: L R
Sampling rate                    : 48.0 KHz
Stream size                      : 2.40 MiB (11%)
Language                         : English

Cheers,
-heff

Answer 3

I had the same problem, but think it was a timing issue that I've hopefully solved pretty easily.

In my case, my HTML page has an element without a source sub-element specified.

<audio id="audio" controls="controls"/>

I have some jquery code executed on page ready that assigns a URL as the audio element's source.

audio_core=$('#audio').attr('src', 'http://mysite.com/audioFile.mp3')[0];
 audio_core.play()

Chrome was happy with this, IE9 wasn't. Seems IE tried recognising the audio file before it had a chance to fully download it.

The fix was simply to pre-load the file by executing a get on it immediatly before assigning it to the audio's source

var soundFileUrl='http://mysite.com/audioFile.mp3'; 
$.get(soundFileUrl, function(){
 audio_core=$('#audio').attr('src', soundFileUrl)[0];
 audio_core.play()
});

Seems to work.

Answer 4

IE not recognizing the file type. Try adding this to a .htaccess file: AddType video/mp4 .m4v AddType video/mp4 .mov

Answer 5

After trying 2 different player libraries and encoding the video abour 6 different times, I found that in my case the mime type was incorrectly configured on my server (.mp4 ~ video/mepg) as opposed to what worked which was .mp4 ~ video/mp4

Answer 6

I had this problem too, but it turned out the problem wasn't with the mime type or the video encoding. I had used handbrake to encode the video and it selected AC3 as a preset for the audio track instead of AAC. After redoing it with AAC everything worked.

Answer 7

did you encode your video using the H.264 codec rather than the standard codec? IE9 will download any file with the .mp4 extension but it requires that the file be encoded using h.264. As of right now only Safari and IE require mp4 H.264 encoding.

Answer 8

my work buddy came up with the following fix that works a treat,

simpy copy the following line of code below, after the <!DOCTYPE html> tag and this will force the content to render in IE 9

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Answer 9

It seems that the codec used to encode the video is not supported.