1

全部，

我正在做一个很棒的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});
    }
});

无济于事。我敢肯定，对于更熟悉的人来说，这是一个超级简单的答案！提前谢谢了。

4

3 回答 3

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});
  }
});
于 2013-11-21T12:14:28.827 回答
1

这是查看哪个浏览器以及是否为触摸设备的简单方法（如果您使用的是最近的 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')";
}
于 2013-11-26T09:49:30.123 回答
0

查看大视频源代码后，您似乎无法为 altSource 添加列表，也无法提供具有源和 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();
于 2013-09-20T17:05:30.140 回答