1

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

有人可以帮忙吗？

干杯安迪

4

1 回答 1

0

该页面上没有使用 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");
    }
  }
);
于 2013-07-30T16:22:07.253 回答