"this" doesn't work when binding functions to events inside a Javascript class -

First of all, I know that I can immediately copy "this", but it does not work here.

Actually I'm writing something to track people who interact with Youtube videos.

I got this job right for one video at a time. But I want to work on it with several YouTube videos, so I changed the code into one category, so that I can create a new example for each video on the page.

The problem occurs when the Youtube event is trying to bind the event listener for state changes. For "non-class" code, it looks like:

  var o = document.getElementById (id); O.addEventListener ("Onset Change", "OnTheStateState Change");  

(On the OnPlayerStateChange function I wrote to track state changes in the video)

(I know that AddEventListener will not work with MSIE but I'm not worried about it yet)

But when I am inside a classroom, I have to use "this" to refer to the second function of that class. This code looks like this:

  this.o = document.getElementById (id); This.o.addEventListener ("Online Change", "this.onPlayerStateChange");  

When this is written like this, then it is. PlayerStat Change is never called. I have tried copying "this" in another variable, e.g. "Me", but he does not work either. OnPlayerStateChange function, before doing this, is defined in the "This" field:

  var me = this; This.o = document.getElementById (ID); this. O.addEventListener ("Online Change", "M. PlayerState Change");  

Any insights?

Seeing them through other similar questions, they are all using jQuery, and I think I can do this by doing this. . But I do not want to use jQuery because it is being posted on random third party sites. I love jQuery but I do not want it to be a requirement to use it.

The global way to access your object's onPlayerStateChange method is when you < Code> me like var me = this; , the variable is valid within the me object method where it is created, however, the Youtube Player API requires a function which is accessible globally, because The actual call is coming from the flash and it does not have any direct reference to your javascript function.

I found it very useful by James Conlan, he discussed a good way to communicate with YouTube's Javascript API and manage events for many videos.

I have released a JavaScript wrapper library on my thoughts. Feel free to checkout the code The underlying idea is simple - store all instances of the player's object on the constructor. For example:

  function player (id) {// placeholder ID's ID that is replaced by / and & lt; Object & gt; Element containing flash video, will replace the // placeholder diwa and its id to this. ID = ID will take over; Player.instances.push (this); } Player.instances = [];  

When passing a string as a callback, use a string of form:

  "Player.dispatchEvent ('playerId')" < / Code> 

When the Flash Player loads this string, then it should return the function. The function callback that will eventually receive the playback event id.

  Player.dispatchEvent = function (id) {var player = ..; // search player object using an id in the "instance" return function (event id) {// it is a callback that gives the player a flash conversation. Notit (event id); }; };  

When the Flash Player loaded the video, the global onyoutubeplayerready function is called. Set up the event handler to listen to playback events within that method.

  YouTubePlayerReady (id) on function {var player = ..; // Find the player in "Examples" // Replace & lt; Id & gt; Player.id var callback = "YoutubePlayer.dispatchEvent ({id})"; Callback = callback.replace ("{id}", player.id); Player AddEventListener ('Onestate Change', Callback); }  

See one.