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

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，这样它们就可以在滚动进入视图时开始一个一个地播放不是同时。。 p>

类似：

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

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

ps im 使用 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');
        }
    });
}