I use VideoJS and SWFObject to enable video. The idea is that VideoJS will try to use the HTML5 tag and fall back from Flash if it is not supported. I am trying to use SWFObject to insert Flash for use as a backup. Here is 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>
Other designations refer to Silverstripe CMS, which is not related to 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 were trying to use a tag <video>, but could not load a compatible source.
Flash, , swfobject , , swfobject, <video>, . : VideoJS , swfobject. ?