1

我正在使用BigVideo.js jQuery 插件来显示全屏背景视频。我有在点击时加载不同背景视频的链接。在每个视频（3-5 秒长）结束时，我正在加载动画。每个视频顶部都有自己的动画。

现在我正在淡出动画，超时时间与视频长度相对应，但这并不是完全证明。我真正需要的是#anim03在video-03.mp4结束时淡入。但我无法弄清楚 BigVideo.js.on("ended")事件究竟是如何工作的。在我下面的代码中（简化）：

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

function setupVideo(url) {
  if (Modernizr.touch) {
    BV.show(url + '.jpg');
  } else {
    BV.show(url + '.mp4',{
      altSource: url + '.webm',
      ambient: false
    });
  }
}

function setupAnimation(num) {
  BV.getPlayer().on("ended", function () { // event from video.js API - when video ends playing
    $('#anim0' + num).animate({ opacity: 1 });
  });
}

$('a').on('click', function(e) {
  e.preventDefault();
  // we remove .ext cause we got to setup .webm and .jpg versions
  var url = $(this).attr('href').replace('.mp4', ''); 
  setupVideo(url);

  var current = $(this).parent().index()+1;
  setupAnimation(current);
});

该事件被触发，但它似乎经历了某种队列并多次触发。如果我这样 console.log num：

function setupAnimation(num) {
  console.log(num);
  BV.getPlayer().on("ended", function () {
    $('#anim0' + num).animate({ opacity: 1 });
  });
}

我得到一个单一的期望值。但如果我这样做：

function setupAnimation(num) {
  BV.getPlayer().on("ended", function () {
    console.log(num);
    $('#anim0' + num).animate({ opacity: 1 });
  });
}

然后我得到多个值num，每次点击并调用这个函数时，我得到的越来越多......我猜这个.on("ended")循环通过一些数组或什么？我无法通过查看插件的代码来弄清楚那部分。

非常感谢任何帮助或指针！

4

1 回答 1

3

当您使用播放器的“on”功能时，您注册了一个新的侦听器功能（这使您可以在发生某些事情时触发多个功能）。

你的“结束”函数多次触发的原因是因为每次 setupAnimation 执行它都会添加一个监听器函数的新实例：

function () {
    console.log(num);
    $('#anim0' + num).animate({ opacity: 1 });
}

查看 Video.JS 的 API 文档 https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#on-type-fn-

如果我做对了你想要完成的事情，解决方案是在“点击”功能之外运行“setupAnimation”。

于 2014-02-14T13:52:57.123 回答