jquery - jQuery と Vimeo Froogaloop API

Question

私は WordPress へのプラグインを構築していますが、これまでのところ PHP ライブラリでうまく機能しています。しかし、JavaScript API に問題があります。

jQueryで使用しようとしていますが、WordPressバージョンのjQueryが$fショートカットをいじっていると思います。なぜこれがうまくいかないのですか？

var vimeoPlayer = {

    init: function() {
        var vimeoPlayers = document.querySelectorAll('iframe'),
        player;

        jQuery('iframe.vimeo-player').each(function(index, iframe){
            player = vimeoPlayers[index];
            $f(player).vimeoPlayer.addEvent('ready', vimeoPlayer.ready);
        });
    },

    addEvent: function(element, eventName, callback) {
        if (element.addEventListener) {
            element.addEventListener(eventName, callback, false);
        }
        else {
            element.attachEvent(eventName, callback, false);
        }
    },

    ready: function(player_id) {
        alert(player_id);
    }
}

jQuery(document).ready(function($){
    vimeoPlayer.init.call();
});

でその動作を確認できますtemp.woodshop.tv/?work/?dickies-campaign/?。

次のエラーが表示されます。

TypeError: 式 '$f(player).vimeoPlayer' [未定義] の結果はオブジェクトではありません。

Answer 1

1つの問題は、addEventが定義した関数であると同時に、$ f（player）オブジェクトのメソッドでもあるということです。2つを混同しているようです。$ f（player）オブジェクトのaddEventメソッドは、プレーヤーイベントの名前と呼び出される関数の2つの引数のみを取ります。$ f（your-iframe）.addEvent（'vimeo event'、your_function）;として使用する必要があります。

addEvent関数は、IEメソッドとW3Cメソッドの間でイベントを統合します。jQueryを使用しているため、必要ありません。jQuery（whatever）.click（）も同じことをします。スニペットの必要な部分が表示されませんが、必要な場合は、jQueryメソッドを使用します。

また、ビデオプレーヤーオブジェクトは$ f（player）.vimeoPlayerではなく$ f（player）である必要があります

これを試して

jQuery('iframe.vimeo-player').each(function(){
    $f(this).addEvent('ready', ready);
});

もう1つの注意点は、追加のプレーヤーイベントは、準備ができたコールバック関数から追加する必要があるということです。例えば：

function ready(player_id){
    $f(player_id).addEvent('play', play);
    $f(player_id).api('play');
    alert("Ready!!!");
}
function play(){
    alert("Playing!!!");
}

VimeoのFroogaloopAPIで必要な情報を見つけるのに苦労しましたが、Vimeo Froogaloop API Playgroundを十数回精査した後、それがどのように機能するかを理解し始めています。

幸運を！

Answer 2

$f(player).vimeoPlayer.addEvent試してみる代わりに$(this).addEvent。