HTML5 Video not working in IE9 – Some tips to debug


If you can’t get HTML5 video to work in IE9 here is the process that I use to figure out what’s wrong:

First I will load up the page and press F12 to bring up the developer tools I then pop over to the console tab in the console I get a reference to the video object using the script below (If the video element is not the first video element then you will need to adjust the array value ).

document.getElementsByTagName("video")[0].error.code

The code that is returned let you know what’s gone wrong,

  • MEDIA_ERR_ABORTED : 1

    The fetching process for the media resource was aborted by the user.
  • MEDIA_ERR_DECODE : 3

    An error has occurred in the decoding of the media resource, after the resource was established to be usable.
  • MEDIA_ERR_NETWORK : 2

    A network error has caused the user agent to stop fetching the media resource, after the resource was established to be usable
  • MEDIA_ERR_SRC_NOT_SUPPORTED : 4

    The media resource specified by src was not usable.

In IE9 if you get error code 4 then there are two common issues:

Incorrect Encoding

IE9 supports H.264 in an MP4 container and WebM if the user has the codec installed on their machine. To support IE9 you will need to ensure that you have correctly encoded your video. For H.264 video I use Miro (a .net application on windows that wraps up FFMPEG) or if I want a specific baseline or setting I use Expression Encoder.

Incorrect MIME Type

You need to make sure your sever returns the correct MIME type when it returns a file. If the file is MP4 then the files MIME type should be video/mp4. If you want to check the MIME type then use the F12 developer tools (press F12 in IE9) and then navigate to the Network Tab. Press Start Capturing and refresh the web site.

You will then be able to see all of the network traffic. Find the video in the list.

image

If you double click the list item you will go to a detailed view. Check to ensure that there is a Content Type with a value of video/mp4. If it’s anything else or it doesn’t exist you will need to change your server to ensure that the correct MIME type is returned.

image

Comments (24)

  1. not sure if my post was published…

    I have a IE9 problem with this video

    http://www.test.mnglab.com/…/MitochondrialDiseasesandAutism3-14-2011_x264.mp4 it was done using Miro

    Thanks,

    Adrian

  2. Crispin says:

    I had this problem with all the build videos – I switched them to silverlight – which was about as ironic a thing as I could imagine after the silverlight debacle of the last few months.  There are some times when even developers just don't want to have to debug something………..

  3. Neeraj says:

    I have using miro converted MP4. it is working using file protocol (locally). when it is hosted on webserver it is not working…any idea?

  4. thebeebs says:

    @neeraj it will be the mime types on the server, your server needs to return video/mp4 for the file extension mp4. What type of server are you hosting your site on? Apache or IIS?

  5. zodiach says:

    I am having the same problems as Neeraj… I used Adobe media encoder to use h.264 that wraps in .mp4… checked the server and it displays the MIME video/mp4 … still nothing… It works on Firefox/Chrome, but not on Safari 5 and IE9… here is my site with the coding for reference http://www.zachyork.com/pages/vids.html

    thank you

  6. Ruchi says:

    Thanks a lot, in my case MIME type was missing.

  7. Rob says:

    I, too, have been unable to get videos to play yet Chrome and Safari plays mp4 without issue.

  8. Dennis Foy says:

    I work in part of a team, we all have PCS's with ie 9 on them. On some pcs mp4s work without problem on others a blank space appears. It looks like there is some other codec thats installed locally thats kick starting it in the browser. All other browsers work fine – just ie 9 thats a problem.

  9. Lawrence says:

    OMG.  THANK YOU SO MUCH!!!

    I was going crazy trying to fix this.  I had my MIME for mp4 set to mpeg!

  10. Janaína says:

    How can I pause an audio from javascript in IE9. I do $("audio").pause(), but it is not working;

  11. Brandon Brotsky says:

    My ideas for this?

    http://jsfiddle.net/7Bbdb/1/

    My first video is working but my second is not.

    Thanks!

  12. Anil says:

    Hi i have debuged with above procedure but Im not getting the type=video/mp4, Im getting

    Content-Type:application/octet-stream

  13. SikDave says:

    THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU, THANK YOU!!

    The Mime Type was the issue. Just added 'AddType video/mp4 .mp4' to my .htaccess file and BANG we were away!!

    Thanks a mil.

  14. Doug says:

    I still can't get my video to work in IE9.  I have tried making sure the content type was correct, and I have encoded the files using a different program.  Nothing seems to work.

    Does this file work for you in IE9?

    devonline.northcarolina.edu/…/player.html

    Any suggestions?

  15. Jacob says:

    adding 'AddType video/mp4 .mp4' on .htaccess worked for me

    thanks heaps!!!!!!!!

  16. Doug says:

    As for my previous post about devonline, the problem was that due to my rewrite rules, the CMS was responding to the request instead of just letting apache serve the file. Since IE requests only parts of the file at a time, and the CMS doesn't do requests for parts of files, it didn't work.

    So I had to change my rewrite rules so that the CMS wouldn't handle mp4s

  17. Robert says:

    HTML5 Video not working in IE9 tips very useful for me…Thanks for Sharing…

    <a href="http://html5videoplayer.co">Html5 video player</a>

  18. incongruous says:

    I am still having the same problem, why can't MS just make something easy to use! 🙂

    <video id="video" style="width:320px; height:180px" src="videos/MyVideo.mp4" controls autoplay loop preload="auto" poster="MicrosoftLogo.jpg">

    HTML5 Video is required for this example

    </video>

  19. Me says:

    I know this article is about 3 years old, but it helped me out today, THANK YOU!  I had to create an ".htaccess" file on my web hosts server with the line "AddType video/mp4 .mp4 .m4v" and it fixed my problem with IE9+ not playing the html5 video.

  20. MoLo says:

    Hey Beebs

    Thanks for the console explanation and document.getElementsByTagName("video")[0].error.code

    Helped pin point the problem.

    For anyone out there working locally with nginx, be sure your nginx MIME type config is set up for video/mp4

  21. BackMan says:

    Video wasn't working in IE 11.  I found that the IE Compatibility Mode setting was ON for the site.  I turned it off and the video worked perfectly.

  22. I have the same problem, is this resolved, would be glad to know about it says:

    I work in part of a team, we all have PCS's with ie 9 on them. On some pcs mp4s work without problem on others a blank space appears. It looks like there is some other codec thats installed locally thats kick starting it in the browser. All other browsers work fine – just ie 9 thats a problem.

  23. Saxon says:

    This post is awesome, it fixed my problem and really easy to follow.

  24. DH says:

    4 years on and this post is still relevant. It was a great help, thanks for sharing.