HTML5 video plays in chrome but not in IE9

Question

I tried every mix that you can find on the Internet and here on SO regarding coding, htaccess and video element, but I can not get these videos to play in IE9 while they work fine in Chrome. Does anyone know magical magic dust to make it work? All that is displayed in IE is a black box with a red x in the center. Here is the link to the test page: (link removed)

Please note that I am showing two videos and two layout options. One of them is a direct copy of Mark Pilgrim's video-type book. The first video was encoded using miro. The second is with ffmpeg. I have included "AddType video / mp4.mp4" in my htaccess in this video directory.

No matter what I tried, or what combinations of presets for ffmpeg, nothing works. I am NOT interested in hearing suggestions about javascript libraries or other libraries.

EDIT1:

After viewing the test page using @heff below, my problems could be related to my host HostGator, which helped the team let me drop that they did not support web design efforts using HTML5. I also have problems with HTML5 audio in IE9 using audio and markup that work in other browsers and other web hosts. I don’t know that my problem is with the host, but I am inclined to believe it and will study tests with other hosts.

I see a lot of similar questions for mine on the Internet and here in SO, and I wonder if they have the same host problems as me.

EDIT2:

I put the video on a local server in my office along with the same web pages using Apache and FreeBSD (HostGator uses Centos). In IE9, videos play very well.

EDIT3: So I got "Uncle Buck Bunny" to work. This is the well-known MP4 that I downloaded. Why it works, I don’t know, but I used the same encoder that they did, I think. They must possess this magical fairy whose dust is not.

EDIT4: Can someone copy one of my videos and markup and make it work on my Host Host?

EDIT5: Thus, IE9 downloads mp4 videos, but simply does not play them or show the controls when the red “x” is displayed. Initially, I thought that the video was not downloaded at all from their dev tools that showed me. Still lost what to do. When I reload the page, I see a flash of controls.

EDIT6: Allowed The solution, as I meant elsewhere, is in encoding. Something else I don't know, but I got this working using the encoding method using ffmpeg. Coding is shown in my answer below.

As I said, no other browser has a problem with what I used.

Answer 1

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

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

Original answer:

I spent weeks trying to get this to work to no avail. Searching the Internet I see countless others struggling with this. I could not find one person who could make him work and show how it was done (with the exception of the special tool used by @heff here).

I can not find answers from Microsoft in my forums and articles. I can't find anything regarding coding that might cause the problem. I believe that countless threads have started in forums that end the same way ... there is no solution.

So the answer is simple. IE9 is broken. But we all already know that. At best, it is not valid, it is the worst browser on the planet. Although Microsoft claims to be able to process video files like this, it cannot do this, while other browsers have no problems.

Therefore, if someone does not come and give instructions, I will answer this answer as the best answer, because it is. Of course, Microsoft cannot or will not provide a better version.

Answer 2

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

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

FULL DISCLOSURE: I became a co-founder of Zencoder. And Zencoder is not a free service or is intended for one-time video codes. This meant coding automation through the API.

Because of this, it seems to me that there may be some corruption in a file that IE9 cannot process. Zencoder corrects many potential failures and creates certain interoperability. You can also try Handbrake, but also uses FFmpeg / x264 afaik.

In Zencoder, I used the query designer and did not change any default settings.

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

Here are the mediainfo results of your test1.mp4 if you want to further explore.

 $ 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 : Baseline@L3.0 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: LR Sampling rate : 48.0 KHz Stream size : 2.40 MiB (11%) Language : English 

Cheers
-heff

Answer 3

I had the same problem, but I think it was a time problem, which I hopefully solved quite easily.

In my case, my HTML page has an element without a specified subitem of the source.

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

I have jquery code executed on a page, ready-made, that assigns the URL as the source of the audio source.

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

Chrome was pleased with this, IE9 was not. It seems IE tried to recognize the audio file before it could fully download it.

The fix was just to preload the file, doing it right away before assigning it to the sound 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 does not recognize file type. Try adding this to your .htaccess file: AddType video / mp4.m4v AddType video / mp4.mov

Answer 5

After two different player libraries and video encoding for 6 times, I found that in my case the mime type was not configured correctly on my server (.mp4 ~ video / mepg), unlike what worked with .mp4 ~ video / mp4

Answer 6

I also had this problem, but it turned out that the problem is not in the mime type, but in the video encoding. I used the handbrake to encode the video, and he chose AC3 as a preset for the audio track instead of AAC. After reusing AAC, everything worked.

Answer 7

Did you encode your video using the H.264 codec, and not the standard codec? IE9 will download any file with the extension .mp4, but requires that the file be encoded using h.264. Currently, only Safari and IE require mp4 H.264 encoding.

Answer 8

my working buddy came up with the following fix that works,

simpy copy the following line of code below, after the <!DOCTYPE html> , and this will make the content display 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.