使用来自 CMS 的 API 控制多个 Vimeo 嵌入 [英] Controlling Multiple Vimeo Embeds using API coming from CMS

问题描述

让多个 Vimeo 视频嵌入在我正在构建的网站上正常播放时遇到了一些麻烦.您可以在此处查看该网站:

I'm having a bit of trouble getting multiple Vimeo video embeds to play nicely on a site I'm building. You can see the site here:

http://bruprodu.nextmp.net/

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

On this page (the homepage), when you click on the play button the Vimeo embed fades in and starts playing. I achieved this easily enough by using:

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

我的问题出在这个页面上:

My problem is on this page:

http://bruprodu.nextmp.net/work

如您所见，我有多个 Vimeo 嵌入，均由 CMS 控制.显然，当我做与上述相同的事情时，它有点吓人，因为它都在看第一个 Vimeo 嵌入.理想情况下，我希望发生的是:

As you can see I have multiple Vimeo embeds, all controlled by a CMS. Obviously when I do the same as the above it kind of freaks out because it's all looking at the first Vimeo embed. Ideally, what I would like to happen is:

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

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

I've read a bunch of stuff about controlling the Vimeo embed using player_id, but without re-writing a bunch of my CMS (and also relying on the site admin to put in a player id) I don't have control of the player_id string in the embed, so ideally I need a front-end solution.

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

Does anyone have any pointers as to how I can solve this--just hints/tips/advice is awesome--and if you need any further info or code examples, let me know.

非常感谢！

推荐答案

这完全可以用 JavaScript/jQuery 来完成.我不使用 froogaloop，但鉴于 Vimeo 推荐它，这可能是个好主意.以下是一些没有 froogaloop 的功能.

This can be done entirely with JavaScript/jQuery. I don't use froogaloop, but it's probably a good idea given it's what Vimeo recommends. Here are some functions without froogaloop which work.

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 嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！