0

froogaloop で動的に追加した 1 つ以上の vimeo プレーヤーから一時停止および再生イベントをキャッチしようとしています。

プレーヤーは最初は非表示になっていますが、それでもイベントをプレーヤーに添付したいと考えています。

私の問題を説明するjsフィドルを作成しました。mydiv に style:display:none がある場合、イベント Ready は発生しません。

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 を削除すると動作します。

これに対する回避策はありますか?

4

1 に答える 1

0

を持つ要素はdisplay:none、多くの面で DOM の一部でさえないかのように動作します。

(単純に、要素を非表示にする別の方法を試してみてください – visibility、絶対に画面外に配置するなど)

…または、あなたが言ったように、プレイヤーが隠れなくなったときにイベントをバインドします。

于 2014-07-21T21:13:02.110 に答える