javascript - BigVideo.js .on ("ended") 触发多次

Question

我正在使用 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") 循环遍历某个数组或其他东西？我无法通过查看插件代码来弄清楚那部分。

非常感谢任何帮助或指示!

Answer 1

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

你的 on "ended"函数多次触发的原因是因为每次执行 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”。