Menu
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
598
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>
As ivan_pozdeev stated, you do need to specify a src tag in your video element. However, you do not need to provide multiple sources for MediaElement.js to work across different browsers.
In your case, you can provide a single .mp4 file and it will work across browsers (see Step 2: Option A at http://www.mediaelementjs.com) as long as you have Flash or Silverlight installed (i.e. ME's "Fall-Forward" functionality).
"Download File" will show up when HTML5 is not native to the browser you are using AND you do not have the respective plugin (i.e. Flash or Silverlight) installed. In mediaelement-and-player.js, break on line 162 (var pv = this.plugins[plugin];) - if "pv" has a value of "0, 0, 0", MediaElement has not detected a plugin and you will receive the "Download File" link.
34
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
