Menu
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.
880
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...
}
Thanks a million for the investigative work and the solution — I ended up going with the slightly more separated code of
var options = {...}
/*@cc_on
@if (@_jscript_version == 9)
options.mode = 'shim';
@end
@*/
$('video, audio').mediaelementplayer(options);
Just putting it here so other people see it, I tried using this code
/*@cc_on
@if (@_jscript_version == 9)
mode: 'shim',
@end
@*/
And I ended up having issues in Internet Explorer 9, it seems that the browser was making an other instance of my video that played over everything else and that I couldn't control at all. I ended up going with this instead.
if($.browser.msie && ($.browser.version == '8.0' || $.browser.version
== '7.0'))
options.mode = 'shim';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
