HTML5 - mp4 video does not play in IE9

I

13

36

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.

Inventory answered 4/8, 2011 at 16:0 Comment(1)

THis worked after all else failed: #16732919 – Foetid 18/10, 2013 at 13:16

I

18

Ended up using http://videojs.com/ to support all browsers.

But to get the video working in IE9 and Chrome I just added html5 doc type and used mp4:

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

Inventory answered 23/9, 2011 at 21:22 Comment(1)

This code will not work in the Firefox, you will need a webm version as well. And having both versions will hamper the echo in ipads and iphones. Will have to used jquery and serve the source according to browser. – Cooe 18/2, 2015 at 10:47

M

41

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>

Myca answered 11/11, 2012 at 8:0 Comment(2)

Also add for chrome: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> – Dislocation 27/11, 2012 at 14:3

@Dislocation to clarify that is for Google ChromeFrame, a discontinued plugin for old versions of IE, not Google Chrome. – Penta 21/10, 2014 at 5:11

I

18

Ended up using http://videojs.com/ to support all browsers.

But to get the video working in IE9 and Chrome I just added html5 doc type and used mp4:

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

Inventory answered 23/9, 2011 at 21:22 Comment(1)

This code will not work in the Firefox, you will need a webm version as well. And having both versions will hamper the echo in ipads and iphones. Will have to used jquery and serve the source according to browser. – Cooe 18/2, 2015 at 10:47

P

17

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

Pauiie answered 23/12, 2011 at 6:47 Comment(1)

This worked for me except I used ffmpeg to convert it on Mac. – Lunsford 13/6, 2016 at 22:6

E

8

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.

Erratic answered 24/5, 2012 at 14:46 Comment(0)

D

6

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.

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
```
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.

Detonation answered 13/3, 2014 at 0:53 Comment(0)

P

3

From what I've heard, video support is minimal at best.

From http://diveintohtml5.ep.io/video.html#what-works:

As of this writing, this is the landscape of HTML5 video:

Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container. Firefox 4 also supports WebM.

Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 also supports WebM.

Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. Google Chrome 6.0 also supports WebM.

Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.

Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.

Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.

Internet Explorer 9 supports all profiles of H.264 video and either AAC or MP3 audio in an MP4 container. It will also play WebM video if you install a third-party codec, which is not installed by default on any version of Windows. IE9 does not support other third-party codecs (unlike Safari, which will play anything QuickTime can play).

Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin. Later in this chapter, I’ll show you how you can use HTML5 video but gracefully fall back to Flash.

As well, you should note this section just below on the same page:

There is no single combination of containers and codecs that works in all HTML5 browsers.

This is not likely to change in the near future.

To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.

Perturb answered 4/8, 2011 at 18:15 Comment(1)

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. – Inventory 4/8, 2011 at 18:45

C

3

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"

Chalcopyrite answered 14/11, 2012 at 9:56 Comment(0)

P

2

use both format it works fine in all browser:

<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>

Perambulate answered 19/11, 2014 at 5:38 Comment(0)

K

2

Internet Explorer and Edge do not support some MP4 formats that Chrome does. You can use ffprobe to see the exact MP4 format. In my case I have these two videos:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf56.40.101
  Duration: 00:00:12.10, start: 0.000000, bitrate: 287 kb/s
    Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p, 1000x1000 [SAR 1:1 DAR 1:1], 281 kb/s, 60 fps, 60 tbr, 15360 tbn, 120 tbc (default)
    Metadata:
      handler_name    : VideoHandler


Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'b.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf57.66.102
  Duration: 00:00:33.83, start: 0.000000, bitrate: 505 kb/s
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 1280x680, 504 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler

Both play fine in Chrome, but the first one fails in IE and Edge. The problem is that IE and Edge don't support yuv444. You can convert to a shittier colourspace like this:

ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4

Kean answered 9/3, 2017 at 10:33 Comment(0)

A

1

Try the following and see if it works:

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

Adulterous answered 4/8, 2011 at 16:6 Comment(1)

I get 'Your browser does not support the video tag.' – Inventory 4/8, 2011 at 16:30

M

1

If any of these answers above don't work, and you're on an apache server, adding the following to your .htaccess file:

//most of the common formats, add any that apply
AddType video/mp4 .mp4 
AddType audio/mp4 .m4a
AddType video/mp4 .m4v
AddType video/ogg .ogv 
AddType video/ogg .ogg
AddType video/webm .webm

I had a similar problem and adding this solved all my playback issues.

Multiplechoice answered 18/11, 2014 at 18:33 Comment(0)

L

0

I had to install IIS Media Services 4.1 from the Windows Web App Gallery.

http://www.microsoft.com/web/gallery/install.aspx?appsxml=http://www.microsoft.com/web/webpi/3.0/MediaProductList.xml&appid=MediaServices

Leveille answered 24/5, 2013 at 16:29 Comment(0)

D

0

Whithout JavaScript, the only way I could play without errors:

<!--[if lte IE 9]>
<!-- PUT HERE A FLASH PLAYER WITH video.flv -->
<![endif]-->

<!--[if gt IE 9]><!-->
<video controls class="video">
    <source src="video.mp4" type="video/mp4">
    <!-- REPEAT FLASH PLAYER CODE HERE -->
</video>
<!--<![endif]-->

Dongola answered 14/4, 2015 at 19:28 Comment(0)

Recommended topics

Hot tags