0

我很难让多个 Vimeo 视频嵌入在我正在构建的网站上正常播放。您可以在此处查看该网站：

http://bruprodu.nextmp.net/

在此页面（主页）上，当您单击播放按钮时，Vimeo 嵌入会淡入并开始播放。我通过使用以下方法很容易地实现了这一点：

  var iframe = $('.showreel-vid')[0],
  player = $f(iframe);
  $(".indexHome .vimeo").on('click', function(e){
      e.preventDefault();      
      $('.showreel-vid').fadeIn();
      player.api('play');
  });

我的问题在这个页面上：

http://bruprodu.nextmp.net/work

如您所见，我有多个 Vimeo 嵌入，全部由 CMS 控制。显然，当我做与上面相同的事情时，它有点吓坏了，因为它都在看第一个 Vimeo 嵌入。理想情况下，我希望发生的是：

  • 点击第一个视频的播放按钮
  • 视频 div 淡入并开始自动播放
  • 当您单击另一个播放按钮时，它会暂停正在播放的
  • 新视频的视频 div（在您单击播放的任何文章中）淡入
  • 此视频开始播放

我已经阅读了很多关于使用 控制 Vimeo 嵌入的内容player_id，但没有重新编写我的一堆 CMS（并且还依赖站点管理员输入玩家 ID）我无法控制player_id字符串嵌入，所以理想情况下我需要一个前端解决方案。

有没有人对我如何解决这个问题有任何指示——只是提示/提示/建议很棒——如果您需要任何进一步的信息或代码示例，请告诉我。

非常感谢！

4

1 回答 1

2

这可以完全使用 JavaScript/jQuery 完成。我不使用 froogaloop，但这可能是一个好主意，因为它是 Vimeo 推荐的。以下是一些没有 froogaloop 的函数。

function pauseAllVideos(){
    $('iframe').each(function(elm){
        if($(this).attr('src').match(/vimeo/ig))
            $(this)[0].contentWindow.postMessage(JSON.stringify({ method: 'pause' }), $(this).attr('src').split('?')[0]);
    });
}

//uses CSS selector id
function playVimeoVideo(id){
    $(id)[0].contentWindow.postMessage(JSON.stringify({ method: 'play' }), $(id).attr('src').split('?')[0]);
}

//example of calling both functions after some button is clicked
$("#somebutton").on('click', function(){
    pauseAllVideos();
    playVimeoVideo("#somevideo");
})
于 2014-03-06T08:30:03.400 回答