Reputation: 11

Why does this movie not load in IE when hosted on web?

I create a simple video elements within an HTML page . Here the code :

<!DOCTYPE html>
<html lang="ar">
    <head>
    <meta charset="utf-8"/>
    <script src="js/jquery-1.8.3.min.js"></script>

        <style>
            body{
                background:gray; 
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            #vid_container {position:absolute;left:50%;top:50%;visibility:visible;text-align:center;z-index:501;}
            #vid_background {position:absolute;left:-350px;top:-270px;width:700px;height:540px;background:url(datas/vid_bg.png);z-index:501;}
            #vid_loader {position:absolute;left:-320px;top:-240px;text-align:center;z-index:502;}
            #vid_button {position:absolute;left:-346px;top:-266px;width:30px;height:30px;background:url(datas/vid_btn.png);z-index:503;cursor:pointer;}


        </style>
    </head>
    <body>

        <div id='vid_container'>

        <div id='vid_background'></div>

        <video id='vid_loader' width="640" height="480" preload controls>
            <source src="my_video.mp4" type="video/mp4">
        </video>

        <div id='vid_button'></div>

        </div>

    </body>
</html>

When i test the code in INTERNET EXPLORER on local (my computer) it works fine and the movie load . but when i host it in my FTP and test via internet , it doesn't load (where it loads on all other browsers)

You can test your self : (open this link with other browsers , it will work fine but with ie it's not )

http://ajnadeen-me.com/eBook/vidbug/index.html

The movie is MP4 compression H.264.

Thanks .

Upvotes: 1

Answers (3)

Áxel Costas Pena

Reputation: 6235

The web server is serving the video with an incorrect MIME type. The current MIME type is video/mpeg (which is not working on IE9). The MIME Content-Type for MP4 video is defined in RFC 4337 - see also the paragraph referring to the specific H.264 encoding, that points to this ISO rule - and it's video/mp4. More about video serving content-types here.

Upvotes: 1

Fabio

Reputation: 2094

First of all you should make sure that the HTML5 tag <video> is supported by Internet Explorer. Only Internet explorer 9 supports it natively see HERE, so if you want it to work also with prior versions you need to add the support of HTML5 tags to older versions of Internet Explorer. If you haven't done it already, you can use html5shiv. Just add this code in the head of your webpage:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

Now you can use the video tag. I give you a solution that uses the video html5 tag first and if that fails it loads the video by using a flash video player without need to use javascript or browser sniffing. Then if even that fails an image placeholder (poster) is displayed and you can allow the visitor of the website to download the video. If you aren't interested in the last part, you can just delete it from the code. As you see in the code, i suggest you to create the video not only in mp4 format but also ogg and webm.

Format compatibility:

Internet Explorer 9+ supports Mp4 but not WebM and Ogg.
Chrome 6+ supports all the three formats.
Firefox 3.6+ supports WebM and Ogg but doesn't support Mp4.
Safari 5+ supports Mp4 but doesn't support WebM and Ogg.
Opera 10.6+ supports WebM and Ogg but doesn't support Mp4.

That's why you should include all the three formats.

I removed the preload attribute because it isn't supported by Internet Explorer.

Here the HTML code is:

<video controls poster="poster.jpg" width="640" height="480">
    <source src="my_video.mp4" type="video/mp4" />
    <source src="my_video.webm" type="video/webm" />
    <source src="my_video.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="480">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['poster.jpg',{'url':'my_video.mp4','autoPlay':false}]}" />
        <img alt="Video" src="poster.jpg" width="640" height="480" title="No video playback capabilities, please download the video below" />
    </object>
</video>
<p>
    <strong>Download video:</strong> <a href="my_video.mp4">MP4 format</a> | <a href="my_video.ogv">Ogg format</a> | <a href="my_video.webm">WebM format</a>
</p>

Server support:

If the MIME type isn't set correctly on the server you may not be able to play the video. If you use Apache server you may add the extension of the video file in /etc/apache or via the AddType configuration directive in httpd.conf .

For Ogg:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

For WebM:

AddType video/webm .webm

For Mp4:

AddType video/mp4 .mp4

I checked the example on w3schools with Internet Explorer 9. If i switch to Internet Explorer 7 or Internet Explorer 8 it isn't supported. (Because of the HTML5 video tag compatibility issue i talked about before). Again you could solve that by using htmlshiv.

It is possible that even if you use Internet Explorer 9, it displays the page in Quirks Mode (compatibility mode, that is as ie7 or ie8). You can avoid that by making sure to use <!DOCTYPE html> without any xml prolog.

Besides you could force the browser emulation to the latest version of Internet Explorer by adding this:

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

In the head of your HTML page.

Upvotes: 1

Ian Devlin

Reputation: 18870

It's possible that your server doesn't have the correct MIME type set up for MP4 video. See point 2 in: HTML5 Multimedia Troubleshooting.

Upvotes: 1

Why does this movie not load in IE when hosted on web?

Answers (3)

Related Questions