Question

我在使用多个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字符串，所以理想情况下我需要一个前端解决方案。

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

非常感谢！

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

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

1 个答案: