VideoJS and swfobject embedding issue

Question

I'm using VideoJS and SWFObject to embed videos. The idea is that VideoJS will try to use the HTML5 video tag and will fallback on Flash if it is not supported. I'm trying to use SWFObject to embed the Flash to use as fallback. Here's the relevant code:

<ul id="client_gallery">
<% if PortfolioMedia %>
    <% control PortfolioMedia %>
    <% if VideoFile %>
        <li style="width:{$VideoWidth}px;height:{$VideoHeight}px">
            <div class="video-js-box">
                <video class="video-js" width="$VideoWidth" height="$VideoHeight" controls preload>
                    <source src="$VideoFile.URL" type="video/mp4" />
                    <div id="flash_player"></div>
                    <script type="text/javascript">
                    var flashvars = {
                        'file': "$VideoFile.URL"
                    };

                    var params = {
                        'allowfullscreen': "true",
                        "wmode": "transparent"
                    };

                    var attr = {
                        'id': 'f_player',
                        'name': 'f_player'
                    };

                    swfobject.embedSWF('/portfolio/javascript/jwplayer/player.swf', 'flash_player', '$VideoWidth', '$VideoHeight', '9', '', flashvars, params, attr, function(e){
                    });
                    </script>
                </video>
            </div>
        </li>
        <% end_if %>
    <% end_control %>
<% end_if %>
<script type="text/javascript">
    $(function(){
        VideoJS.setupAllWhenReady();
    });
</script>
</ul>

The other notation is from the CMS Silverstripe, which is irrelevant in this issue. This works fine in Chrome, Safari, and IE but not in Firefox. In Firefox all I get is an empty container, as if it was trying to use the <video> tag but couldn't load a compatible source.

It is not embedding Flash at all, and I know the swfobject code is working because if I use just the swfobject code, not within the <video> tag, it works perfectly. So the problem is: VideoJS won't fallback to code embedded by swfobject. But why?

Answer 1

videojs already ha a build in flash support build in as fallback. If you want to use your own flash player you can change it in the options for example:

<script type="text/javascript">
  VideoJS.options.flash.swf = "pathtoyourplayer.swf";
  VideoJS.options.flash.flashVars = {youroptions};
  VideoJS.options.flash.params = {youtparams};
  VideoJS.options.flash.attributes = {yourattributes};
</script>

..

<video ...>
  <source src=".." type="video/mp4" />
</video>

additional: swfObject is already in videojs included.