Question

我正在尝试使我的嵌入式Vimeo视频在退出视口时暂停，并允许另一个嵌入式Vimeo视频在进入视口时播放。

我一直在探索各种解决方案，并发现了Froogaloop效果很好，但是我相信它是旧的Vimeo api。

我得到了退出时暂停视频的确切示例，但是它使用的是ID而不是类，因此无法在多个视频上使用，并且不确定如何做到这一点。

<div class="inner">
<iframe id="video" src="https://player.vimeo.com/video/220643186? 
autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0" width="640" 
height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen 
allowfullscreen></iframe>
</div>

Jquery：

 var iframe = document.getElementById('video');

// $f == Froogaloop
var player = $f(iframe);

var inner = $(".inner");
var elementPosTop = inner.position().top;
var viewportHeight = $(window).height();
$(window).on('scroll', function () {
    var scrollPos = $(window).scrollTop();
    var elementFromTop = elementPosTop - scrollPos;

    if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
        inner.addClass("active");
        player.api("play");
    } else {
        inner.removeClass("active");
        player.api("pause");
    }
});

任何帮助将不胜感激：）

Answer 1

您需要不同的播放器对象-每个iframe都需要一个。出于性能原因，您应该在onScroll函数之外创建播放器列表。

item.IsSelected

您可以在此处进行测试：https://jsfiddle.net/ptc1qy0m/ 注意：如果声音打开，则无法自动开始任何视频。因此，在这种情况下，您必须手动启动每个视频。

Vimeo iFrame在视口外播放和暂停

1 个答案: