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

Question

我想在播放 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。这就是解决方案不再起作用的问题所在。为了澄清事情，我将 2 个 fiddle 放在一起。

This fiddle作品。当您播放视频时，黄色的测试器 div 会变成红色。

This fiddle不工作。首先点击绿色的“视频1”按钮，然后播放器显示。但是当你按下播放键时，黄色的测试器 div 不会变成红色。

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

Answer 1

您可以向所有播放器 iframe 添加一个类，因此在代码中您只需要检查播放器是否具有该类，然后根据需要进行更改。

而且看起来你还必须在 js 中定义玩家并每次都绑定(bind)事件。可能有更好的方法来做到这一点，但我只是查看了代码并想出了这个

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