播放 vimeo 嵌入时向 div 添加一个类

Posted 2023-05-08

【中文标题】播放 vimeo 嵌入时向 div 添加一个类

【英文标题】：Add a class to a div when a vimeo embed is playing

【发布时间】：2014-05-15 10:52:37

【问题描述】：

我想在。我在Vimeo API 上找到了一些信息。 This is the fiddle 我最终得到了。它适用于左侧视频，当你播放它时，tester div 变为红色，当你暂停它时，它变为黄色。我如何更改代码以使其适用于两个视频？或者更具体地说，在任意数量的 vimeo 嵌入上？

为了完整起见，下面是我使用的代码：

html：

<iframe id="player1" 
    src="http://player.vimeo.com/video/27855315?api=1&player_id=player1"
      frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<iframe id="player2"
    src="http://player.vimeo.com/video/27855375?api=1&player_id=player2"
      frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<p>Video status: <span class="status">...</span></p>
<div id="tester"></div>

CSS：

#tester
  background-color:yellow;
  width:100px;
  height:100px;


#tester.playing
  background-color:red;

JS/jQuery:

var iframe = $('#player1')[0],
    player = $f(iframe),
    status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() 
    status.text('ready');

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
);

// Call the API when a button is pressed
$('button').bind('click', function() 
    player.api($(this).text().toLowerCase());
);

function onPause(id) 
    $('#tester').removeClass('playing');


function onFinish(id) 
    $('#tester').removeClass('playing');


function onPlayProgress(data, id) 
    $('#tester').addClass('playing');

更新：

我正在将 vimeo 动态添加到一个空的 iframe 中。这就是解决方案不再起作用的问题所在。为了澄清事情，我把两个小提琴放在一起。

This fiddle 有效。当您播放视频时，黄色的 tester div 会变为红色。

This fiddle 不起作用。首先单击绿色的“视频1”按钮，然后播放器显示。但是当你按下 play 时，黄色的 tester div 不会变成红色。

我无法弄清楚问题是什么。当我检查元素时，两个 iframe 在渲染时看起来完全相同。当我动态加载 src 时，有什么区别？为什么它不工作？

【参考方案1】：

您可以为所有播放器 iframe 添加一个类，因此在代码中您只需要检查播放器是否具有该类并更改您想要的任何内容。

此外，您似乎还必须在 js 中定义播放器并每次绑定事件。可能有更好的方法可以做到这一点，但我只是查看了代码并想出了这个

http://jsfiddle.net/HfwWY/2558/

<iframe id="player1" class="change" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1"   frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe id="player2" class="change" src="http://player.vimeo.com/video/27855375?api=1&player_id=player2"   frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

JS

var iframe = $('.change');

iframe.each( function() 
    var player = $f( $(this)[0] );
    // When the player is ready, add listeners for pause, finish, and playProgress
    player.addEvent('ready', function() 
        status.text('ready');

        player.addEvent('pause', onPause);
        player.addEvent('finish', onFinish);
        player.addEvent('playProgress', onPlayProgress);
    );

 );

var status = $('.status');

随意将类更改更改为更有意义的东西，例如 videoPlayer 或其他，只要确保更改也应用于 js 中

【讨论】：

谢谢，这是我正在寻找的核心内容，而且效果很好。虽然我很难在我自己的网站上实现它。它有点复杂，因为涉及更多的事情。但我无法理解为什么它不起作用......也许你可以看看？把它全部放在一个小提琴中将是相当多的工作，我不确定它是否会让它更清晰。 This is the url of my site。如果您向左滚动 1 页，然后单击左侧视频，则活动导航项应该可以播放课程，但它没有。

在旁注中，我还注意到在小提琴中，this 也有效。

我尝试查看您的网站，但我发现很难在上面做任何事情，因为它很复杂。只要你理解了我回答中的js，你应该就能弄清楚。如果你不能让某些东西工作，那么尝试自己定义每个视频，直到它们都工作，然后尝试组合它。我什至不知道第一个视频在您的页面上的位置

是的，添加一个新的球员并改变职业也可以。您可以通过更改类再添加 40 个，它们都会起作用。

我想通了。我在小提琴中试过了。所以它应该在我的网站上工作。就像我说的，当你打开网站时，当你用左边的白色条形按钮向左滚动一次，然后点击左边的视频，它就会开始播放。此时，活动的导航项目应该让课程开始播放。