When I use MediaElement.js and list first the mp4 file and then webm, then it doesn t play anything in Chrome (11.0.686.3 dev).
It works fine in Safari/FF/Opera.
It works fine in Chrome if I list mp4 first and webm second but don t call mediaelementplayer, using native HTML5 video.
It also works fine in Chrome (and others) if I call mediaelementplayer but list webm file first.
I ve tried all variations and can t figure out this behavior.
I got around it on by changing source order on server side for Chrome, but i m not a fan of that solution.
If anyone has any ideas I d be grateful.
My HTML
<video width="475" height="275" controls="controls">
<source src="/media/BetterDays.mp4" type= video/mp4; codecs="avc1.42E01E, mp4a.40.2" />
<source src="/media/BetterDays.webm" type= video/webm; codecs="vp8, vorbis" />
<source src="/media/BetterDays.theora.ogv" type= video/ogg; codecs="theora, vorbis" />
<!-- Flash fallback -->
<object width="475" height="275" type="application/x-shockwave-flash" data="/javascripts/flashmediaelement.swf">
<param name="movie" value="/javascripts/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&poster=/images/better_poster_200.jpg&file=/media/BetterDays.mp4" />
</object>
<!-- Image as a last resort -->
<img src="/images/better_poster_200.jpg" width="475" height="275" title="No video playback capabilities" />
</video>
My jQuery call:
$( video ).mediaelementplayer();