HTML5 - mp4 video does not play in IE9

158,296

Solution 1

for IE9 I found that a meta tag was required to set the mode

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

<video width="400" height="300" preload controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag
</video>

Solution 2

If it's still not working here's what may certainly be a solution: encode the mp4 with compression format H.264. If you encode it with format mpeg4 or divx or else it will not work on IE9 and may as well crash Google Chrome. To do that, I use Any Video Converter freeware. But it could be done with any good video tool out there.

I've been trying all solutions listed here and tried other workaround for days but the problem lied in the way I created my mp4. IE9 does not decode other format than H.264.

Hope this helps, Jimmy

Solution 3

Dan has one of the best answers up there and I'd suggest you use html5test.com on your target browsers to see the video formats that are supported.

As stated above, no single format works and what I use is MP4 encoded to H.264, WebM, and a flash fallback. This let's me show video on the following:

Win 7 - IE9, Chrome, Firefox, Safari, Opera

Win XP - IE7, IE8, Chrome, Firefox, Safari, Opera

MacBook OS X - Chrome, Firefox, Safari, Opera

iPad 2, iPad 3

Linux - Android 2.3, Android 3

<video width="980" height="540" controls>
        <source src="images/placeholdername.mp4" type="video/mp4" />
        <source src="images/placeholdername.webm" type="video/webm" />
        <embed src="images/placeholdername.mp4" type="application/x-shockwave-flash" width="980" height="570" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed>  <!--IE 8 - add 25-30 pixels to vid height to allow QT player controls-->    
    </video>

Note: The .mp4 video should be coded in h264 basic profile, so that it plays on all mobile devices.

Update: added autoplay="false" to the Flash fallback. This prevents the MP4 from starting to play right away when the page loads on IE8, it will start to play once the play button is pushed.

Solution 4

Internet Explorer 9 support MPEG4 using H.264 codec. But it also required that the file can start to play as soon as it starts downloading.

Here are the very basic steps on how to make a MPEG file that works in IE9 (using avconv on Ubuntu). I spent many hours to figure that out, so I hope that it can help someone else.

  1. Convert the video to MPEG4 using H.264 codec. You don't need anything fancy, just let avconv do the job for you:

    avconv -i video.mp4 -vcodec libx264 pre_out.mp4
    
  2. This video will works on all browsers that support MPEG4, except IE9. To add support for IE9, you have to move the file info to the file header, so the browser can start playing it as soon as it starts to download it. THIS IS THE KEY FOR IE9!!!

    qt-faststart pre_out.mp4 out.mp4
    

qt-faststart is a Quicktime utilities that also support H.264/ACC file format. It is part of libav-tools package.

Solution 5

I have a base profile .mp4 video which plays on one server, and does not on another.

The only difference is:
one gives a header "Content-Length: ..."
the other "Trasfer-Encoding: chunked".

I found out that Content-Length is not needed, it is only important, that there should be NO chunked header. This can be done by turning off compression (deflate or gzip) for .mp4 files. How this can be done is another issue and another topic: How to disable Apache gzip compression for some media files in .htaccess file?

There can be another server issue:
it has to give "Content-Type: video/mp4"
and NOT "Content-Type: text/plain"

Share:
158,296
Admin
Author by

Admin

Updated on March 10, 2020

Comments

  • Admin
    Admin about 4 years

    I have an mp4 video that I want to play in IE9 using HTML5 <video> tag. I added the MIME type to IIS 7 so if I browse http://localhost/video.mp4 it plays in both Chrome and IE9 but not in HTML5, Chrome plays the video in HTML though. Here's the code:

    <html>
    <body>
      <video src="video.mp4" width="400" height="300" preload controls>
      </video>
    </body>
    </html>
    

    Any ideas?

    Thanks

    UPDATE:

    Tried the same file in Firefox 5.0 and it didn't work either, only Chrome is able to play the mp4 video.

  • Admin
    Admin almost 13 years
    I get 'Your browser does not support the video tag.'
  • Admin
    Admin almost 13 years
    Thanks. This is was a simple test before I start working on the real site, unfortunately that means spending a lot of time encoding all the videos but I guess will have to deal with it.
  • Navigatron
    Navigatron over 11 years
    Also add for chrome: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  • lacy
    lacy over 9 years
    @Navigatron to clarify that is for Google ChromeFrame, a discontinued plugin for old versions of IE, not Google Chrome.
  • JoeMoe1984
    JoeMoe1984 almost 8 years
    This worked for me except I used ffmpeg to convert it on Mac.