Video.js Firefox-22 Mac OS x fancybox - macos

Question

I´m having a huge problem with the video.js and mp4 (h.264) video viewing in a lightbox (fancy box) on Firefox 22 on the Mac OS X, 10.7.5.
Here’s the test page: http://ranova.thull-hosting.de
Click on the play button in the middle where it says “WILLKOMMEN BEI RANOVA”.
All other browsers work like a charm but FF gives the error: “no video with supported format and MIME Type Found”, Firebug states: “The given ’type-Attribute’ ’video/mp4’ is not supported. Loading media resource http://video-js.zencoder.com/oceans-clip.mp4 failed. ”
Here’s the code:
<script>
$(document).ready(function() {
$('#startplayer').fancybox(
{content : '<video class="video-js vjs-default-skin" controls preload="none" width="555" height="311" poster="http://ranova.thull-hosting.de/fileadmin/videos/interview1_neu_vorschau.jpg" data-setup="{}"><source src="http://video-js.zencoder.com/oceans-clip.mp4" type=\'video/mp4\'></source></video>'
}
);
});
// $("#startplayer").fancybox({'padding':0,'margin':0,'width':640,'height':360,helpers:{title:{type:'inside'},overlay:{css:{'background':'rgba(0,0,0,0.5)'}}},'type':'swf','swf':{'wmode':'transparent','allowfullscreen':true}});
Can anyone help please?
Cheers
andi

Answer 1

Video.js isn't being used on that page, so you just have a plain video element and Firefox can't play the file. By using video.js its Flash fallback will play the MP4 on Firefox.
Include the video.js javascript and css on the page
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
As the video element didn't exist when the document was ready, use Fancybox's onComplete option to create the video.js player. Note I've given the video element an id to reference it.
$('#startplayer').fancybox(
{content : '<video id="my_video" class="video-js vjs-default-skin" controls preload="none" width="555" height="311" poster="http://ranova.thull-hosting.de/fileadmin/videos/interview1_neu_vorschau.jpg"><source src="http://video-js.zencoder.com/oceans-clip.mp4" type=\'video/mp4\'></source></video>',
onComplete: function() {
videojs("my_video");
}
}
);