Question

所有，

我正在与伟大的bigvideo.js合作开展一个项目。没什么好看的：我只是在后台播放一些短视频。不需要导航，字幕等。这是我正在使用的简单代码：

var BV = new $.BigVideo();
  BV.init();
  if (Modernizr.touch) {
    BV.show ('/images/backgrounds/bg-bob-test.jpg');
    } else {
    BV.show(['/videos/bob_video_test_color.mp4', '/videos/bob_video_test_one.mp4'],{ambient:true});
    }
  });

它甚至适用于Firefox / ogg文件......直到我尝试按照网站的说明添加多个文件：

$(function() {
  var BV = new $.BigVideo({useFlashForFirefox:false});
  BV.init();
  BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});

我的问题是：如何正确地将两者结合起来？换句话说，如何为每个mp4视频调用'altSource'，以便在Firefox中循环多个视频？我试过了：

var BV = new $.BigVideo({useFlashForFirefox:false});
  BV.init();
  if (Modernizr.touch) {
    BV.show ('/images/backgrounds/bg-bob-test.jpg';
      } else {
    BV.show(['/videos/bob_video_test_one.mp4', {altSource:'/videos/bob_video_test_one.ogg'},'/videos/bob_video_test_two.mp4', {altSource:'/videos/bob_video_test_two.ogg'}],{ambient:true});
    }
});

无济于事。我相信这对于知道更多的人来说是一个超级简单的答案！提前谢谢了。

Answer 1

我遇到了同样的问题并通过简单地检查Firefox而不是使用altSource来解决它：

$(function() {
  var BV = new $.BigVideo({useFlashForFirefox:false});
  BV.init();

  if ($.browser.msie || $.browser.opera || Modernizr.touch) {
    BV.show('video-poster.jpg');
  } else if ($.browser.mozilla) {
    BV.show('video.ogv', {ambient:true});
  } else {
    BV.show('video.mp4', {ambient:true});
  }
});

Answer 2

这是查看哪个浏览器及其触摸设备的简单方法（如果您使用的是最近的jquery库，则可能需要使用jquery migrate）：

$(function() {
var BV = new $.BigVideo({useFlashForFirefox:false});

if($.browser.msie||$.browser.opera){
  BV.init();
} else {

  var vids = [
    '/assets/vids/1.mp4',           
    '/assets/vids/2.mp4',
    '/assets/vids/3.mp4'
  ];
  vids.sort(function() { return 0.5 - Math.random() }); 
  var vidsFF = [
    '/assets/vids/1.ogv',           
    '/assets/vids/2.ogv',
    '/assets/vids/3.ogv'
  ];
  vidsFF.sort(function() { return 0.5 - Math.random() }); 
  BV.init();

  if (Modernizr.touch) {
    BV.show('assets/vids/fallback.jpg');
    } else {
      if($.browser.mozilla){
        BV.show([vidsFF[0], vidsFF[1], vidsFF[2]], {ambient:true});
      } else {
        BV.show([vids[0], vids[1], vids[2]], {ambient:true});
      }
    }          
  }
});

然后你需要为后备设置一个背景图像封面（基本上是垃圾IE）：

div {
    background: url(../images/feature-background.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/feature-background.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/feature-background.jpg', sizingMethod='scale')";
}

Answer 3

在查看big video source code之后，您似乎无法为altSource添加列表，也无法提供具有source和altSource的对象作为show的第一个参数。

我认为你应该做的是听bigvideo播放事件，在bigvideo之外管理你的播放列表，只需在当前视频停止时调用show。

可能是这样的：

var playlist = [{source: '/videos/bob_video_test_one.mp4', altSource:'/videos/bob_video_test_one.ogg'},{source: '/videos/bob_video_test_two.mp4', altSource:'/videos/bob_video_test_two.ogg'}];

function playNext() {
  var next = playlist.shift();
  BV.show(next.source, next.altSource);
}


var player = BV.getPlayer();
player.on('ended', playNext);

playNext();

多个视频使用bigvideo.js和Firefox兼容

3 个答案: