Flash in mediaelement.js only shows "download file"
I would like to get the Flash fallback for mediaelement.js to work, but it only shows a black area saying "download file" in the upper left. The video markup I generate looks very much like this. I just modified some paths for privacy reasons:
<video width="1024" height="576" preload="none" style="display: none; ">
<object width="1024" height="576" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="/wp-content/themes/my_theme/js/vendor/mediaelement/flashmediaelement.swf">
<param name="flashvars" value="controls=true&file=http://mybucket.s3.amazonaws.com/my_video.mp4">
</object>
</video>
Is there anything obviously wrong with this? Is there a way to get some debug output? When does the "download file" thing show up? The mediaelement.js page doesn't mention it anywhere. I first thought one of the paths must be wrong, but I can't see any failed requests in Chrome's debug tools.
Any help is appreciated!
EDIT: I extracted a minimal example of the failing code and uploaded it here
Answer
1) You didn't specify <source/> inside video - that's why it doesn't work. You need to specify multiple <source/>'s for it to work in different browsers - see "Option B" at http://mediaelementjs.com/ .
"Download file" link is indeed generated by MediaElement logic (see mediaelement-and-player.js:1027).
2) Flash fallback will only be invoked if the browser doesn't support <video> tag. To test it in a browser that does, replace "<video>" with an invalid tag - say, "<voodeo>".
Here's the fixed code (replaced some paths to be able to test it):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajmurmann.com/flash_test/mediaelement-and-player.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('video').mediaelementplayer({
enablePluginDebug: true,
plugins: ['flash','silverlight']
});
});
</script>
</head>
<body>
<video width="1024" height="576" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="http://mediaelementjs.com/media/echo-hereweare.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="http://mediaelementjs.com/media/echo-hereweare.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="http://mediaelementjs.com/media/echo-hereweare.ogv" />
<object width="1024" height="576" type="application/x-shockwave-flash" data="http://ajmurmann.com/flash_test/flashmediaelement.swf">
<param name="movie" value="http://ajmurmann.com/flash_test/flashmediaelement.swf">
<param name="flashvars" value="controls=true&file=http://ajmurmann.com/flash_test/echo-hereweare.mp4">
</object>
</video>
</body>
</html>