Vimeo iFrame Play和暂停视口 [英] Vimeo iFrame Play & Pause out of Viewport

问题描述

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

I'm trying to get my embedded Vimeo video to pause on exiting the viewport and allow another embedded Vimeo video to play upon entering viewport.

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

I've been exploring various solutions and discovered Froogaloop which works perfectly, however I believe is the old Vimeo api.

我得到了退出时暂停视频的确切示例，但是它使用的是ID而不是类，因此无法在多个视频上使用，并且不确定如何完成此操作.

I got an exact example working of the video pausing on exiting, but its using an ID rather than class so unable to use on more than one video and not entirely sure how to accomplish this.

示例-Jsfiddle

<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");
    }
});

任何帮助将不胜感激:)

Any help would be immensely appreciated :)

推荐答案

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

You need different player objects - one for each iframe. For performance reasons you should create the list of players outside of your onScroll function.

var players = []
$('.inner').each(function() {
  players.push({
      player: new Vimeo.Player($(this).find("iframe").get(0)),
      top: $(this).position().top,
      status: "paused"
  })
});
var viewportHeight = $(window).height();

$(window).on('scroll', function() {
    var scrollPos = $(window).scrollTop();
    for(var i=0; i<players.length;i++) {
        var elementFromTop = players[i].top - scrollPos;
      var status = (elementFromTop > 0 && elementFromTop < players[i].top + viewportHeight) ? "play" : "pause";   
      if(players[i].status != status) {
          players[i].status = status;
          players[i].player[status]();
          console.log(i, status);      
      }
    }
});

您可以在此处进行测试: https://jsfiddle.net/oxf4dtn3/

You can test here: https://jsfiddle.net/oxf4dtn3/

注意:如果声音打开，则无法自动开始任何视频.您可以使用参数& muted = 1"使vimeo视频静音

Note: it is not possible to start any video automatically, if its sound is on. You can mute vimeo videos using the parameter "&muted=1"

这篇关于Vimeo iFrame Play和暂停视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！