javascript - 在播放vimeo嵌入时将一个类添加到div

我想在播放vimeo嵌入时向div添加一个类。我在Vimeo API上找到了一些信息。 This is the fiddle我最终得到了。它适用于左侧视频，播放时，测试器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有效。播放视频时，黄色测试器div变为红色。

This fiddle不起作用。首先单击绿色的“视频1”按钮，然后播放器显示。但是，当您在其上按播放时，黄色测试器div不会变成红色。

我不知道是什么问题。当我检查元素时，两个iframe在呈现时看起来都完全相同。有什么区别？为什么在我动态加载src时为什么不起作用？

最佳答案

您可以向所有播放器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