Jquery

Question

我有一个 div 有多个循环播放的视频。为了提高性能，我暂停了视频，直到它们使用以下代码滚动到视口中：

 jQuery(window).on("load resize scroll",function(e){
        if (jQuery('#vid-container').visible(true)) {
               start_vid(); 
        } else {
            jQuery('iframe[id*="fitvid0"]').each(function () {
                 $f(this).api('pause');
            });
        }
    });
});

function start_vid(){
    jQuery('iframe[id*="fitvid0"]').each(function () {
                $f(this).api('setVolume', 0);
                $f(this).api('play');
            });
}

这可行，但由于每个视频 iframe 都有相同的 ID，一旦 #vid-container 出现，它们就会同时开始播放。

我试图找出一种方法，我可以将每个 vid Iframe individually 作为目标，这样他们就会在滚动到视图时一个一个地开始播放 不同时.

类似于：

if (jQuery('#vid-container child2, #vid-container child3, #vid-container child4, #vid-container child5').visible(true)) {
start_vid();
}

希望这是有道理的..谢谢

ps 我正在使用 jquery.visible 插件和 vimeo api

Answer 1

在 start_vid() 函数中检查可见性。

function start_vid(){
    $f('iframe[id*="fitvid0"]').each(function () {
        if ($f(this).visible(true)) {
            $f(this).api('setVolume', 0);
            $f(this).api('play');
        }
    });
}

Jquery - 不同时单独定位多个子 div

Jquery - target multiple child divs individually not simultaneously

html

children

target