jquery 如何延迟每个克隆视频的播放

Question

我想制作一个视觉效果，同时多次播放同一个视频，但有一点延迟。第一个视频将在开始时播放，其余视频以级联方式播放，每个延迟 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');
                         });
                        });

Answer 1

jQuery 中 .each() 的第一个参数是当前索引，因此您可以使用 index * 1000 来增加循环中的延迟

第二个参数是当前元素，因此您也可以使用它来代替 video 选择器

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

jquery 如何延迟每个克隆视频的播放

jquery how to delay play of each cloned video

video

jquery

clone

delay

settimeout