JQuery API and Vimeo Froogaloop

Question

I am creating a plugin for WordPress and am still well versed in the PHP library. But I have some problems with the JavaScript API.

I'm trying to use it with jQuery, and I think the jQuery version of WordPress is messing with the $f shortcut. Why is this not working?

 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(); }); 

Can you see it in action at temp.woodshop.tv/?work/?dickies-campaign/? .

I get this error:

TypeError: The result of the expression '$ f (player) .vimeoPlayer' [undefined] is not an object.

Answer 1

One problem is that addEvent is both the function you defined and the object method of $ f (player). You seem to be confusing these two. The addEvent method of the $ f (player) object takes only two arguments, the name of the player event and the function to be called. It should be used as $ f (your-iframe) .addEvent ('vimeo event', your_function);

The addEvent function will unify events between IE and W3C methods. This is not necessary because you are using jQuery. jQuery (whatever) .click () does the same. I don’t see any part of your fragment where you need it, but if you do, I just use the jQuery method.

In addition, the video player object must be $ f (player) instead of $ f (player) .vimeoPlayer

try it

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

Another thing to note is that any additional player events must be added from your ready-made callback function. For example:

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

It was hard for me to find the information I want on the Vimeo Froogaloop api, but after clearing the Vimeo Froogaloop API Playground about a dozen times, I begin to understand how it works.

Good luck

Answer 2

Instead of $f(player).vimeoPlayer.addEvent try $(this).addEvent .