jquery как отложить воспроизведение каждого клонированного видео - PullRequest
Новая
       41

jquery как отложить воспроизведение каждого клонированного видео

0 голосов
/ 29 января 2020

Я хочу сделать визуальный эффект, воспроизводя одно и то же видео несколько раз одновременно, но с небольшой задержкой. Первое видео будет воспроизводиться при запуске, а остальные - каскадным способом с задержкой 1000 для каждого, поэтому последнее будет воспроизводить количество клонированных видео x1000.

Но я не могу отложить воспроизведение для каждого клон. Просто сделайте паузу или играйте все одновременно. Чего мне не хватает? 

    <body>
    <div class="masonry-css" id="gridVideos">
    </div>
    <script type="text/javascript">
        var cloneCount = 1;
        var count = 0;
        $.fn.multiply = function (numCopies) {
            var newElements = this.clone(true, true);
            for (var i = 1; i < numCopies; i++) {
                count++;
                newElements  = newElements.add(this.clone(true, true)
                                          .attr('id', 'Videos' + cloneCount++)
                                          .insertAfter($('[id^="gridVideos"]:last'))
                );
            }
            return newElements;
        };
        var repeVideos = $('<video/>', {
            'id': 'myVideo',
            'class': 'masonry-css-videos',
            'width': '320',
            'muted': 'true',
            'loop': 'true',
            'src': 'videos/AVIDEAlow.webm',
            'type': 'video/webm',
        });
        var repetimos = $('<div/>', {
            'id': 'Videos0',
            'class': 'masonry-css-item',
        });
        var todoDivsVideo = repetimos.append(repeVideos);
        $('#gridVideos').append(todoDivsVideo.multiply(9));
        $('video').trigger('pause');
        $('[id^="Videos"]').find('video').each(function(){
                        setTimeout(function(){$('video').trigger('play');
                         });
                        });

1 Ответ

1 голос
/ 29 января 2020

Первый параметр .each() в jQuery является текущим индексом, поэтому вы можете использовать index * 1000 для увеличения задержки во время l oop

Второй Параметр является текущим элементом, поэтому вы можете использовать его вместо селектора video 

$('[id^="Videos"]').find('video').each(function(index, video) {
  setTimeout(function() {
    $(video).trigger('play');
  }, index * 1000)
});
...