Firefox and HTML5 video element – weird behaviour with flash fallback. Possible bugs in mediaelemnts.js

Question

I'm working on embedding video to a web-page and am using mediaelements.js. I used following code from the mediaelements.js examples:

<video width="640" height="360" id="player2" poster="img/echo-hereweare.jpg" controls="controls" preload="none">
    <source type="video/mp4" src="somevideo.mp4" />
    <source type="video/webm" src="somevideo.webm" />
    <source type="video/ogg" src="somevideo.ogv" />
    <object width="640" height="360" type="application/x-shockwave-flash" data="flash/flashmediaelement.swf">       
        <param name="movie" value="flash/flashmediaelement.swf" /> 
        <param name="flashvars" value="controls=true&amp;file=somevideo.mp4" />
        <img src="img/echo-hereweare.jpg" width="640" height="360" alt="Here we are" 
        title="No video playback capabilities" />
    </object>
</video>

Then later on comes the script-code from the example:

<script>
    $('audio,video').mediaelementplayer({
        success: function(player, node) {
            $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
        }
    });
</script>

Then I discovered some strange thing in Firefox. When I'm using this code without starting mediaelements.js (not using the script above), firefox tries to play the .mp4, but naturally the console reports an error that the .mp4 format is not supported. So far so right.

In my understanding, the video element should now try the next format – .webm. Instead the flash fallback gets loaded (flashmediaelement.swf) (nothing gets played so far, as the play-button is not clicked yet, but still the .swf is loaded completely).

Then when I play the video the .webm gets downloaded and played – as expected.

When I use it with mediaelements.js an even weirder thing is happening – the .swf not only gets fully loaded once, but is requested at least one more time, without being downloaded (you see it in firebug's network tab – a yellow line with a busy spinner, as if it would load and load. But there is no error or any status code, nor a filesize displayed. It seems kind of like an "stuck" request. I would like to post a screenshot of it, but am not allowed at the moment.).

Additionaly I get the alert in Firebug's console, that the .webm cannot be decoded. The .webm-video starts loading but won't be loaded fully (status code 206). Then no video plays at all, because the .webm is tried to play but stops because of the decoding error. Shoudn't the flash fallback jump in then?

My questions are now:

Is this normal behaviour in Firefox for media elements – that the fallback flashplayer gets loaded, even though it is not needed?
Why does it load two or three times in the second scenario allthough it is not used either? I guess this is a bug in mediaelemnts.js
And third, why does firefox play the .webm without mediaelements.js and doesn't with mediaelements.js? I guess another bug?

Thx for any help.

---NOTE--- I know I am using the .swf that comes with the mediaelements.js as a fallback solution, even when I am not using mediaelements.js. Does anyone know a simple lightweight flash video player? Or would I have to stick with flowplayer as the standard flash video player?

Rob Rob · Accepted Answer · 2012-10-08T05:12:53

I can't have multiple versions of all my video files (there's lots and the whole site is downloaded) so I wrote this and it seems to work on current Safari, FireFox and Chrome -should work on everything else or add to the non MP4 list

<script type="text/javascript">
    /*U might need to add other non-MP4 native browsers*/
    if (navigator.userAgent.indexOf('Firefox'||'Chrome') != -1) {
        document.write("<object type='application/x-shockwave-flash' data='player.swf' width='480' height='270'>
        <param name='movie' value='player.swf' />
        <param name='allowFullScreen' value='true'/>
        <param name='wmode' value='transparent' />
        <param name='flashVars' value='controlbar=over&amp;file=video/sequence03.mp4' />
        <span title='No video playback capabilities, please download the video below'>
        <a href='video/sequence03.mp4'>Sequence 03</a></span></object>")
    }
    else {
        document.write("<video width='480' height='270' controls><source src='video/sequence03.mp4' type='video/mp4' /></video>")
    }
</script>

Firefox and HTML5 video element – weird behaviour with flash fallback. Possible bugs in mediaelemnts.js

1 Answers