當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。這是問題出現的解決方案不再工作。爲了澄清事情，我把兩把小提琴放在了一起。

This fiddle工程。當您播放視頻時，黃色測試儀格子變紅。

This fiddle不起作用。首先點擊綠色的「視頻1」按鈕，然後播放器顯示。但是當你按下它時，黃色測試器div不會變紅。

我不知道問題是什麼。當我檢查元素時，兩個iframe在呈現時看起來完全一樣。有什麼區別，爲什麼動態加載src時動態地加載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以及