"Download File" with MediaElements.js Video in IE8

Question

I've looked at a few other resources, both on SO and MediaElements' website and nothing seems to be working.

I tried making a JSFiddle but it won't load in IE8: http://jsfiddle.net/RyzaV/

Here's the code:

<div id="video" class="box">
    <video width="200" height="155" style="width: 100%; height: 100%;" id="player1" controls="controls" preload="true">
        <source type="video/<?php echo $video_format; ?>" src="<?php echo $video_url; ?>" />
        <object width="200" height="155" type="application/x-shockwave-flash" data="http://s3.amazonaws.com/websites.retailcatalog.us/media/mediaelements/flashmediaelement.swf">
            <param name="movie" value="http://s3.amazonaws.com/websites.retailcatalog.us/media/mediaelements/flashmediaelement.swf" />
            <param name="flashvars" value="controls=true&file=<?php echo $video_url; ?>" />
        </object>
    </video>

   <link type="text/css" rel="stylesheet" href="//s3.amazonaws.com/websites.retailcatalog.us/media/mediaelements/mediaelementplayer.min.css" />
   <script type="text/javascript" src="//s3.amazonaws.com/websites.retailcatalog.us/media/mediaelements/mediaelement-and-player.min.js"></script>
   <script type="text/javascript" language="javascript">
        $('#video').find('video:first').mediaelementplayer({
            success: function(media, node, player) {
                $('#' + node.id + '-mode').html('mode: ' + media.pluginType);
            }
            , flashName: 'flashmediaelement-cdn.swf'
        });
    </script>
</div>

Any idea what I'm missing? This is the reference page:
http://www.mediaelementjs.com/#note2

Answer 1

Unsure exactly what caused the problem, but the following ended up working (it looks like the object tag was causing the issue):

<div id="video" class="box">
    <video width="200" height="155" style="width: 100%; height: 100%;" id="player1" controls="controls" preload="true">
        <source type="video/<?php echo $video_format; ?>" src="<?php echo $video_url; ?>" />
    </video>

   <link type="text/css" rel="stylesheet" href="//s3.amazonaws.com/websites.retailcatalog.us/media/mediaelements/mediaelementplayer.min.css" />
   <script type="text/javascript" src="//s3.amazonaws.com/websites.retailcatalog.us/media/mediaelements/mediaelement-and-player.min.js"></script>
   <script type="text/javascript" language="javascript">
        $('#video').find('video:first').mediaelementplayer({
            success: function(media, node, player) {
                $('#' + node.id + '-mode').html('mode: ' + media.pluginType);
            }
            , flashName: 'flashmediaelement-cdn.swf'
        });
    </script>
</div>

Answer 2

you should put the following lines in the head tag :

<link type="text/css" rel="stylesheet" href="//s3.amazonaws.com/websites.retailcatalog.us/media/mediaelements/mediaelementplayer.min.css" />
<script type="text/javascript" src="//s3.amazonaws.com/websites.retailcatalog.us/media/mediaelements/mediaelement-and-player.min.js"></script>

Then, be sure that you call jQuery before mediaelement-and-player.min.js.