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

循环播放视频，一个接一个地播放

1 个答案: