IE9 HTML5 video support

Asked 27/10, 2011 at 8:25 Answered 29/9, 2014 at 3:6

I'm having some trouble displaying HTML5 video in IE9, I added the different types to my htaccess

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

This is what I have as html

<video id="video" autoplay loop preload>
            <source src="video/final_loop.mp4" type="video/mp4" />
            <source src="video/final_loop.webm" type="video/webm" />
            <source src="video/final_loop.ogg" type="video/ogg" />

            Your browser does not support the <code>video</code> element. 
        </video>

I also tried converting the video to Theora ogv format and use

<source src="video/final_loop.theora.ogv" type="video/ogv" />

But this doesn't work either, I thought .ogg was supported in IE9?

Nagaland answered 27/10, 2011 at 8:25 Comment(1)

What is the difference between .ogg and .ogv? In the context of codec used and browsers support. I thought (heard), that none. Both video formats (if they really differs at all) uses the same codes and if any browser supports .ogg, it will also support .ogv. Am I mistaken? – Farrah 16/9, 2013 at 10:12

-2

On the official Microsoft website there is this code snippets for video on IE9

<video width="400"
    height="300"
    src="video.mp4"
    poster="frame.png"
    autoplay
    controls
    loop>
    This content appears if the video tag or the codec is not supported.
 </video>

Try with this code.

Exurbanite answered 27/10, 2011 at 8:28 Comment(4)

Thanks, but I tried that before, I also don't see why it would suddenly work now, since I'm using the same video format in my example – Nagaland 27/10, 2011 at 8:32

Video tag is an experimental features, there is no codec standard for now :( Use this tag wisely. :) – Exurbanite 27/10, 2011 at 8:34

Yeah, I know it's experimental, I got it to work in Chrome, Firefox and Safari, just IE is being a pain. – Nagaland 27/10, 2011 at 8:35

@DavideAversa Why you're giving an answer that is an exact copy of OP's question? Why people are upvoting answer that isn't answer at all? Strange community... – Farrah 16/9, 2013 at 10:13

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.

Home answered 13/3, 2014 at 0:49 Comment(0)

Are you trying to use this on IIS?

If so, you have to add the appropriate mime types to recognize your video files:

<configuration>
  <system.webServer>
    <staticContent>
      <!-- Video -->
      <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
      <mimeMap fileExtension=".webm" mimeType="video/webm"/>
    </staticContent>
  </system.webServer>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>

</configuration>

Here's some markup that works for me in IE9 (in the root folder, i have a "video" folder with my files):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Video Demo</title>    
    </head>
    <body>
        <video id='movie'
            autoplay 
            controls
            loop 
            preload=auto
            playbackRate="1"
            width="800">
                <source src="video/video.mp4" type='video/mp4' /> 
                <source src="video/video.webm" type='video/webm' />
        </video>
    </body>

</html>

Psychogenesis answered 27/10, 2011 at 16:35 Comment(1)

Doesn't the AddType adds the mime types for my server? Anyway, for now we solved it by creating an animated gif and displaying this on IE9, it came in handy because the gif can also be used on the iPhone / iPad – Nagaland 28/10, 2011 at 4:4

As others have mentioned, IE9 doesn't support OGV, only MP4 and WebM (with plugin). I encountered a lot of trouble even with the MP4, which should play natively, before finding out that one thing to consider when serving MP4 files for IE9 is the file meta information called moov atom embedded in the MP4 file itself. If it's located at the end of the file, where some encoders including ffmpeg places it, IE9 will not start playing the video unless the whole video file downloaded. Relocating the moov atom metadata to the beginning of the file enables progressive download of the MP4 file, and IE9 handles the video nicely.

There's a tool called qt-faststart to perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.

make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4

Subsolar answered 4/3, 2012 at 12:42 Comment(0)

See this page; it provides a solution to the poster issue with IE9, and expands on video codecs:

Some simple CSS and conditional statements did the trick. I'm now of the opinion posters should be placed at the beginning (first frame) and end (last frame) of a video, as if they were album covers. In this way, an image at the beginning and end of the video will give the viewer SOME visual idea of why they should play the video (just like the reason you buy an album sometimes is because of the cover).

Addiction answered 24/12, 2012 at 8:4 Comment(1)

Granted this was posted three years ago, but the link is now broken. – Icebound 7/7, 2015 at 19:48

Please be aware that for IE9, the video source must be given in the 'src' attribute of the video tag itself.

I suggest that you detect IE9 specifically and add that property to the video tag. You need to do it specifically for IE9 because Firefox on OSX won't accept the MP4 video file in src tag.

Hope it helps!

Osteopathy answered 29/9, 2014 at 3:6 Comment(1)

I have a problem with my video in IE9 and I have all the sources as sub elements. Will give your advice a shot. – Preiser 15/12, 2014 at 10:23

IE9 does not support Ogg/Theora. It will support WebM if you install the codec.

Ringhals answered 27/10, 2011 at 10:16 Comment(0)

-2