Home/ Questions/Q 7590745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T20:28:52+00:00

I would like to get the Flash fallback for mediaelement.js to work, but it

  • 0

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&amp;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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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&amp;file=http://ajmurmann.com/flash_test/echo-hereweare.mp4">
            </object>
        </video>
    </body>
</html>
    • 0