HTML5 <video> tag not working in Internet Explorer

Question

The following code displays a video control. The user can successfully watch the video in Safari, Firefox, Chrome, both via desktop and mobile browsers.

The video control does NOT work in the latest version of Internet Explorer (11?) -- neither desktop nor mobile.

Here's the code in question:

 <div id="videoDiv" class="wrappableBlock">
     <h2><img src="/code/images/video.png"/>Introductory Video</h2>
     <video controls preload="metadata" >
       <source src="/code/images/video.mp4#t=8" type="video/mp4" >
       <source src="/code/images/video.ogg#t=8" type="video/ogg" >
       <em>Sorry, your browser doesn't support HTML5 video.</em>
     </video>
 </div>

According to the documentation referenced here, Internet Explorer should be able to process MP4 video files provided that they are H.264 / AAC encoded. My video meets these specifications.

The symptoms are:

(1) In desktop version of Internet Explorer (11.0) the video player shows up but pressing the play button does nothing.

(2) In the mobile version (latest version as of 5/12/14 @ Microsoft store) the video player shows as an inoperable black square. The dimensions of the square are correct but there's no way to interact with it.

In no case does my default code <em>Sorry, your browser doesn't support HTML5 video.</em> display.

What else shall I try? It's not necessary to find a working solution for IE versions prior to 10.

UPDATE: Another tidbit.. Entering the full path to the video file(s) in the IE URL area executes a download of the file. So it's not a "file not found" situation. It's accessible.

Also... The Internet Explorer network tab shows that IE isn't even bothering to query for the file. As opposed to the other browsers which automatically execute a GET request for the video.

What does the console say? Is your server set up with correct mime-types for mp4? (check console) — user1693593
Yes, the mime types are set up correctly. I know that's the case because I can see the mime types being returned when I look at the HTTP request/response stream in the Firebug log. The server is IIS running on Windows 2008 BTW. When you suggest looking at the console, is this something that's in Internet Explorer? Will be happy to check it out. — Chad Decker
Aha, yes, I see. Ok, the only error it returned was one telling me that I should've included <!DOCTYPE html> at the top of my document. I added it but it didn't make a difference. What's interesting is that on the network tab, I can see that it's not even trying to load the video file(s), neither the .mp4 or the .ogg. So it's not like the file is bad. It's not even trying to load it. Weird! This is in contrast to Firefox, etc. which actually attempts to retrieve the video file via a GET request. — Chad Decker
Without seeing the full html/file structure it's gonna be a guess: try to specify the url without the prefixed forwards slash, ie. src="code/images/video.mp4" (and without the #-part). And when you tried the url directly in the address bar, did it play properly (assuming yes, but you don't state - and QT is not installed?) ? — user1693593

Kawal Jain Kawal Jain · Accepted Answer · 2016-08-09T20:24:38

first check your ie version. if it is lower than 9. Then you need to use flash player. or you can also used embeded option in Internet exploer 8 or less than 8.

like this {

<video id="Video1" controls width="100%" height="auto" poster="pic.png" >
<source src="video.mp4" type='video/mp4;' />
<embed src="video.mp4" wmode="opaque">
<param name="wmode" value="opaque" />
</embed>
</video>

} It works in me..

HTML5 <video> tag not working in Internet Explorer

2 Answers