在前一个结束前一个接一个地播放视频

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