Question

I have a page with multiple YouTube embedded players that I need to listen for events on. I am trying to use the solution posted as the answer to Using Youtube's javascript API with jQuery, but I am getting a strange error: (in Chrome 18.0.1025.137 beta-m)

Uncaught SyntaxError: Unexpected token %

That is the extent of the error, including stacktrace. My code is like this:

var onYouTubePlayerReady = function (id) {
var evt = '(function(){})';

alert(eval(evt)); //just to verify that the snippet is syntactically correct

var ytplayer = document.getElementById(id);
ytplayer.addEventListener("onStateChange", evt);
};

(see the other question for more context)

The error is thrown when the onStateChange event is fired. If I make evt "" or a function name, then it doesn’t throw the error (but I also get no state information).

Clearly, the error message is bogus, but anyone know if what I’m trying to do is possible?

Answer 1

Actually, turns out it’s incredibly stupid. Running the code in Firefox yielded a real error message:

syntax error


try { __flash__toXML(%28function%28%29%7B%7D%29(5)) ; } catch (e) { "<undefined/...
---------------------^

So, apparently, it needs to be serializable to XML in order to be used as a callback. Which is really kind of annoying.

My solution was something like this:

var ytCallbackID = 1;

var makeYTCallback = function (func) {
    var ret = "ytCallback" + (ytCallbackID++);
    window[ret] = func;

    return ret;
}

var onYouTubePlayerReady = function (id) {
    var evt = makeYTCallback(function(state) {
        onYouTubePlayerStateChange(id, state);
    });

    var ytplayer = document.getElementById(id);
    ytplayer.addEventListener("onStateChange", evt);
};

I haven’t fully tested it (since I did this right at the end of the day yesterday), but I think it’ll work.

Got around to testing it, and it works like a charm! It’s a bit fugly, both in idea and implementation, but it works and that’s what’s important 🙂