HTML5 video in IE

Having some trouble playing html5 video in internet explorer

[brandozz]

I'm having some issues trying to use html5 to play back a video. Everything is fine in Firefox and Chrome but Internet Explorer will not play the video.

Here is my code

<video class="video" controls="controls" poster="img/video.jpg" width="548" height="308">
      <source src="video.mp4" type="video/mp4" />
      <source src="video.webm" type="video/webm" />
      <source src="video.ogv" type="video/ogg" />
      <object id="flowplayer" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="548" height="308">
      <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
      <param name="allowFullScreen" value="true" />
      <param name="wmode" value="transparent" />
      <param name="flashVars" value="config={'playlist':['img%2Fgetlowfees-video.jpg',{'url':'video.mp4','autoPlay':true}]}" />
      <img src="img/video.jpg" width="548" height="308" title="No video playback capabilities, please download the video below" />
      </object>
      </video>

We have the mp4 MIME type set up on the IIS. I should also say that this is an asp.net application. Only time there is an issue is trying to playback in IE on a IIS or my local windows machine.

thanks

[DrDoc]

Which IE version? Or is it in all of them?

[brandozz]

It is all of them, I've tested IE7 - IE10

[drhowarddrfine]

It took us forever to get IE to play using the audio tag. I'd bet you find out the problem lies in how it's encoded. Anything can play your video but IE but once you figure out the magic pixie dust, everything will play just fine. The problem is, finding out where the magic pixie dust is.

Writing code for IE is like adjusting a rabbit ear antenna for a TV.

[brandozz]

I'm actually having the individual that produced the video look into that. I'll post what I find.

Strangely when the video is uploaded to a Linux server the video plays fine in IE.

[Fotiman]

Strangely when the video is uploaded to a Linux server the video plays fine in IE.

In that case, I'd suggest running something like Fiddler to inspect the HTTP headers and compare the differences between the headers from the Linux server and those from IIS.

[brandozz]

Will Fiddler work locally? Can I install it on my windows pc where I am developing the application?

[brandozz]

I've installed fiddler, and I'm looking at the video and I'm wondering if there is anything specific I should be looking for. Nothing is really jumping out at me as being an error.

[Fotiman]

I would find the HTTP request for the actual video file that should be playing, and then do an exact comparison of what was sent in the Linux-served header vs. the IIS one, and identify what EXACTLY is different. If it's the same file and it's playing on one but not another, then I suspect the Linux one is sending something that the IIS one isn't (but should be), or that the IIS one is sending something that the Linux one isn't (and shouldn't be).

[brandozz]

I was actually able to get this to work in IE by using absolute urls instead of relative urls.

I wonder if my asp.net application was having some type of effect on the relative urls. Although the videos are embedded in the Default.aspx page content area, not in a master page or include file.

[brandozz]

So I wanted to update this. I was able to get my video to work in IE but now it's not working on iphone or ipad. I didn't expect this, I've been reading that the iphone and ipad support mp4 video with H.264 codec.

I opened my mp4 file in quicktime and exported it for iphone and ipad as a .m4v file which doesn't work with IE.

I've gotten desperate and actually used the "visible-desktop" (bootstrap) class on the mp4 that works with IE and all other desktop browsers and "visible-phone visible-tablet" on the m4v that works on mobile and tablet devices. I really don't want to do this because the browser is actually loading two video files even though one is not visible.

[drhowarddrfine]

You've got to be careful making adjustments to make things work on IE while breaking modern browsers to do it.

Like I said before, wish I could be more helpful but I just don't recall how we got things working.

[brandozz]

I've been doing a lot of testing. I uploaded the video to a Linux server and created a simple html page and embeded the video in it, defined the video types in my htaccess and the iphone and ipad will play it. The video that the ipad and iphone will not play is on a Windows server.

[Fotiman]

Again, going back to what I said earlier...

I would find the HTTP request for the actual video file that should be playing, and then do an exact comparison of what was sent in the Linux-served header vs. the IIS one, and identify what EXACTLY is different. If it's the same file and it's playing on one but not another, then I suspect the Linux one is sending something that the IIS one isn't (but should be), or that the IIS one is sending something that the Linux one isn't (and shouldn't be).

[brandozz]

I've tried to examine the network traffic using fiddler but I just don't see anything different.

[Fotiman]

Can you post the Response Headers for the files? In Fiddler, select the HTTP request for the file (result should be 200), then under Inspectors, select the "Headers", then click the [Raw] link to get a version that you can just select and copy. Do the same thing for both servers.

[brandozz]

This is from the Windows Server:
HTTP/1.1 200 OK
Date: Mon, 26 Aug 2013 21:03:21 GMT
Content-Type: video/mp4
Transfer-Encoding: chunked
Connection: keep-alive
Keep-Alive: timeout=5
Last-Modified: Mon, 19 Aug 2013 20:48:42 GMT
ETag: "a4e94b7d1d9dce1:0"
Server:


This is from the Linux Server:
HTTP/1.1 304 Not Modified
Server: nginx
Date: Mon, 26 Aug 2013 21:10:18 GMT
Last-Modified: Mon, 26 Aug 2013 20:38:01 GMT
Connection: keep-alive
ETag: "521bbca9-339c86"
X-Powered-By: PleskLin

[Fotiman]

The Linux version is returning 304, so you'll need to empty your browser cache to get the 200 OK message on the Linux server.