BigVideo.js .on ("закончился") срабатывает несколько раз

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 }); 
} 

проверки документации API из Video.JS https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#on-type-fn-

Если я правильно понимаю, что вы пытаетесь выполнить, решение заключается в запуске 'setupAnimation' вне функции on 'click'.