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

Question

我想在播放 vimeo 嵌入时向 div 添加一个类。我在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"
    width="400" height="225" frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<iframe id="player2"
    src="http://player.vimeo.com/video/27855375?api=1&player_id=player2"
    width="400" height="225" 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 时，有什么区别？为什么它不工作？

Answer 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" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe id="player2" class="change" src="http://player.vimeo.com/video/27855375?api=1&player_id=player2" width="400" height="225" 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 中