如何在动态 iframe 中暂停 vimeo？

Question

我有一组项目，当我点击其中一个时，我正在加载一个 iframe。当我点击另一个项目时，我将关闭任何打开的项目并使用 vimeo 加载其相关的 iframe。但是，我需要暂停之前的 vimeo，因为它可能正在播放。

这就是我所做的，但它并没有阻止任何其他播放 vimeo

$(document).on( 'click', '.item:not(.is-expanded)', function() {
  var videoSpan =  $(this).find("span.video");
  var url = videoSpan.data("vimeoid");
  if(url){
    var tokens = url.split("/");
    var id = tokens[3];
    var iframe = $('<iframe/>', {
     'frameborder' : 0,
     'class' : 'tide embed-responsive-item',
     'src' : 'http://player.vimeo.com/video/'+ id + '?api=1&player_id=player1 webkitAllowFullScreen  mozallowfullscreen allowFullScreen',
     load:function(){
       var iframeB = $('#player1')[0];
       var player = $f(iframeB);
       player.addEvent('pause', onPause);
      }
    });
    videoSpan.replaceWith(iframe);
  }
});

我已经插入了他们的 api <script src='//f.vimeocdn.com/js/froogaloop2.min.js'></script>

控制台显示 Uncaught ReferenceError: onPause is not defined

This is what they say about their api use

Answer 1

这样解决的，基本上我清空加载iframe的span，每次都重新加载。

$(document).on( 'click', '.item:not(.is-expanded)', function() {
  $(".item span.video").empty();
  var videoSpan =  $(this).find("span.video");
  var url = videoSpan.data("vimeoid");
  if(url){
    var tokens = url.split("/");
    var id = tokens[3];
    var iframe = $('<iframe/>', {
      'frameborder' : 0,
      'class' : 'tide embed-responsive-item',
      'src' : 'http://player.vimeo.com/video/'+ id + '?api=1 webkitAllowFullScreen  mozallowfullscreen allowFullScreen'
    });
    videoSpan.html(iframe);
  }
});

如何在动态 iframe 中暂停 vimeo？

How to pause vimeo in a dynamic iframe?

javascript

jquery

vimeo

vimeo-api