Video.js Firefox-22 Mac OS x fancybox答案

【问题标题】：Video.js Firefox-22 Mac OS x fancyboxVideo.js Firefox-22 Mac OS x fancybox
【发布时间】：2013-07-30 14:09:11
【问题描述】：

我在 Mac OS X 10.7.5 上的 Firefox 22 上的灯箱（花式框）中观看 video.js 和 mp4 (h.264) 视频时遇到了很大问题。

这里是测试页面：http://ranova.thull-hosting.de

点击中间显示“WILLKOMMEN BEI RANOVA”的播放按钮。

所有其他浏览器都像魅力一样工作，但 FF 给出错误：“没有找到支持格式和 MIME 类型的视频”，Firebug 声明：“不支持给定的‘type-Attribute’‘video/mp4’。加载媒体资源 http://video-js.zencoder.com/oceans-clip.mp4 失败。 ”

代码如下：

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

有人可以帮忙吗？

干杯安迪

【问题讨论】：

标签： macos video fancybox video.js firefox-22

【解决方案1】：

该页面上没有使用 Video.js，因此您只有一个纯视频元素，而 Firefox 无法播放该文件。通过使用 video.js，它的 Flash 后备将在 Firefox 上播放 MP4。

在页面上包含 video.js javascript 和 css

<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>

由于文档准备就绪时视频元素不存在，请使用 Fancybox 的 onComplete 选项创建 video.js 播放器。请注意，我已经给视频元素一个 id 来引用它。

$('#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");
    }
  }
);

【讨论】：