使用来自 CMS 的 API 控制多个 Vimeo 嵌入答案

【问题标题】：Controlling Multiple Vimeo Embeds using API coming from CMS使用来自 CMS 的 API 控制多个 Vimeo 嵌入
【发布时间】：2014-04-08 06:02:23
【问题描述】：

我很难让多个 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（在您点击播放的任何文章中）淡入
此视频开始播放

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

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

非常感谢！

【问题讨论】：

标签： javascript jquery video vimeo froogaloop

【解决方案1】：

这可以完全使用 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");
})

【讨论】：