Video.js火狐-22

Question

我的video.js和mp4 (h.264)视频在Mac上的Firefox22上的一个灯光盒(花哨的盒子)上观看10.7.5，我有一个巨大的问题。

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

点击中间的播放按钮，上面写着“WILLKOMMEN BEI RANOVA”。

所有其他浏览器的工作方式都很有魅力，但是FF给出了错误：“不支持支持格式的视频和MIME Type Found”，Firebug声明：“不支持给定的‘类型-属性’视频/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}});

​

有人能帮忙吗？

干杯，安迪

Answer 1

Video.js没有在那个页面上使用，所以你只有一个普通的视频元素，火狐不能播放这个文件。通过使用video.js，它的fallback将在火狐上播放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");
    }
  }
);