Mediaelement.js malfunction in IE, no flashback works

Michael Martinez picture Michael Martinez · May 31, 2011 · Viewed 7.9k times · Source

I used the mediaelement.js in my site, I used for the example a .mp4 file with H.264 codec, works well in all browsers, but it doesn't works in any version of Internet Explorer when I publish the site. On my localhost, it doesn't have any problems (the flash fallback works well), but in my server it doesn't works.

The code I used is:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VIDEO HTML5</title>

    <script type="text/javascript" src="player_files/jquery.js"></script>
    <script type="text/javascript" src="player_files/mediaelement-and-player.min.js"></script>
    <link href="player_files/mediaelementplayer.min.css" rel="Stylesheet" />
</head>

<body>


<video id="video1" src="http://www.teletica.com/html5/videos/precious.mp4" width="640" height="360" poster="http://www.teletica.com/html5/videos/precious.jpg" controls="controls" preload="none"></video>

<video width="640" height="360" id="video2" poster="videos/precious.jpg" controls="controls" preload="none">
    <source type="video/mp4" src="http://teletica.com/html5/videos/precious.mp4" />
    <source type="video/webm" src="http://teletica.com/html5/videos/precious.webm" />

    <object width="640" height="360" type="application/x-shockwave-flash" data="player_files/flashmediaelement.swf">        
        <param name="movie" value="player_files/flashmediaelement.swf" /> 
        <param name="flashvars" value="controls=true&file=http://teletica.com/html5/videos/precious.mp4" />         

        <img src="player_files/precious.jpg" width="640" height="360" alt="Here we are" title="No video playback capabilities" />
    </object>   
</video>

<script type="text/javascript">
    $('video, audio').mediaelementplayer();
</script>

The player works in this direction http://www.teletica.com/html5.

Answer

russ24 picture russ24 · Nov 10, 2011

I had the same problem and found an undocumented feature in another post: mode:shim ~ not sure of what its doing, specifically, but it seems to force all browsers to fall back on to flash.

Since chrome, ios, et al were working properly with html5 video, I used conditional comments to specify IE9 and force the fall back (flash or silverlight):

        var player = new MediaElementPlayer('video', {
/*@cc_on
@if (@_jscript_version == 9)
            mode: 'shim',
@end
@*/
            // remove or reorder to change plugin priority
            plugins: ['flash','silverlight'],

            // etc...

        }