jquery - 隐藏视频 vimeo 上的 froogaloop 事件

Question

我正在尝试从我使用 froogaloop 动态添加的一个或多个 vimeo 播放器中捕捉暂停和播放事件。

玩家最初是隐藏的，但我仍然想将事件附加到玩家。

我做了一个 js fiddle 来说明我的问题。当 mydiv 有 style:display:none 时，准备好的事件不会触发。

http://jsfiddle.net/jonasvermeulen/c3dqU/2/

这是我的html：

<div id="mydiv" style="display:none"></div>

这是我的jQuery

$('#mydiv').append('<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>');
var iframe = $('#player1')[0];
var player = $f(iframe);

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

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

function onPause(id) {
    alert('paused');
}

function onFinish(id) {
    alert('finished');
}

function onPlayProgress(data, id) {
    alert(data.seconds + 's played');
}

当您删除 display:none 时，它​​可以工作。

有解决方法吗？

Answer 1

在许多方面，元素的display:none行为就好像它们甚至不是 DOM 的一部分。

（只需尝试使用另一种隐藏元素的方法 - visibility，绝对定位在屏幕外，......）

......或者，正如你所说，当玩家不再隐藏时绑定事件。