IE9 HTML5 video support

10
votes

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?

7
htmlvideointernet-explorer-9
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? – trejder

7 Answers

9
votes

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.

5
votes

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>
1
votes

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
1
votes

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

1
votes

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!

-2
votes

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.