Video.js Firefox-22 Mac OS x fancybox

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

score 0 · Accepted Answer · answered Jul 30 '13 at 16:22

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");
    }
  }
);

Video.js Firefox-22 Mac OS x fancybox

1 Answers1