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”功能时，您会注册一个新的侦听器功能（这使您可以在发生某些事件时触发多个功能）。

你的“结束”函数多次触发的原因是因为每次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-

如果我做对了你想要完成的事情，解决办法就是在'click'功能之外运行'setupAnimation'。

BigVideo.js .on（＆＃34;结束＆＃34;）多次触发

1 个答案: