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的范围，每次都重新加载。

$(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？

1 个答案: