Воспроизведение видео в цикле, один за другим до предыдущего конца

Question

У меня есть слайдер, в котором 3 видео должны запускаться одно за другим в цикле, однако каждое следующее видео должно воспроизводиться определенное время ДО того, как закончится предыдущее видео (пока оно еще работает). Приведенный ниже код запускает второе видео, но я понятия не имею, как пометить правильный индекс, потому что, очевидно, он срабатывает несколько раз после достижения точки в видео. Есть идеи?

$('.slide .video').on('timeupdate', function (e) {
    if (this.currentTime * 1000 > this.duration * 1000 - transitionDuration) {
        $activeSlide = $('.slide').eq(activeIndex + 1);
        $activeVideo = $activeSlide.find('.video');
        $activeVideo[0].play();
        $('.slide').eq(activeIndex + 1).addClass('is-animated');
    }
});

<div class="slider">
    <div class="slide">
        <video class="video"></video>
    </div>
    <div class="slide">
        <video class="video"></video>
    </div>
    <div class="slide">
        <video class="video"></video>
    </div>
</div>

Answer 1

Я понял это, однако, Chrome сходит с ума, а видео прерывистое.Что я делаю не так, как мне улучшить производительность?

videos.on('timeupdate', function () {
    var progress = this.currentTime / this.duration * 100 + '%';
    $(this).closest('.slide').find('.js-video-progress').width(progress);
    if ((this.currentTime * 1000 + 1000) > this.duration * 1000) {
        if ($(this).closest('.slide').next('.slide').length) {
            $(this).closest('.slide').next('.slide').addClass('is-swiped').find('video')[0].play();
        } else {
            $('.slide').eq(0).addClass('is-swiped').find('video')[0].play();
        }
    }
});