Mediaelement.js javascript error in IE

Question

I'm using MediaElement.js as my HTML5 video player for a site in progress. It works fine in Chrome, Safari, and Firefox, even with the fallback player, but in Internet Explorer I get the Javascript error seen here: http://d.pr/Jsfo. It doesn't seem to be loading my poster, or my player style (which works fine in the other browsers).

The player's code is being loaded dynamically, because it appears in a lightbox and there are multiple videos that can be played on the page. The Javascript that injects the HTML is at the bottom of the page

You can see the development site live at http://mindsmack.ryangiglio.com

Answer 1

Unfortunately, you can't dynamically insert HTML5 tags in IE because it breaks their nesting

<video>
   <source src="file.mp4">
   <source src="file.webm">
</video>

becomes

<video />
<source src="file.mp4">
<source src="file.webm">

And then MediaElement.js can't figure out where the source files are.

My recommendation would be to put a <video> tag in a permanent spot on the page, then prepare a MediaElement object

var player = new MediaElementPlayer('#video');

and then when you're ready to play a video, just call it

// single MP4
player.setSrc('newfile.mp4');

// OR multiple
player.setSrc([{src:'newfile.mp4',type:'video/mp3'},{src:'newfile.webm',type:'video/webm'}]);

// load and play
player.load();
player.play();

Also, you should remove the <object> embed HTML inside the <video> tag since that's only for cases when IE users don't have JavaScript enabled, and your app requires JavaScript.