Skip to main content

ActionScript: JavaScript Event Handlers for JW Player

JW Player has a rich JavaScript API. One of the things you can do is to create JavaScript event handlers for ActionScript events. However, there are a few things that can bite you in the butt if you don't keep them in mind.

First of all, as the documentation points out, you can't set an event handler until JW Player is ready for it. If you set it too early, it won't work, and you won't even get an error message. If you have a function called playerReady, it'll automatically be called by JW Player. That's a great place to setup your handlers.

Next, when JW Player calls playerReady, it's supposed to pass an obj containing the ID for the HTML DOM object. In my experience, it doesn't. Hence, you have to lookup the object manually. See my previous post about the fact that you can't use jQuery's $() to lookup the object, but should instead stick with document.getElementById.

Last of all, remember that when you give JW Player your JavaScript callback, you have to pass the function's name as a string. It feels natural to pass a function pointer or even to have an inline function, but that doesn't work (nor will you get an error message).

In summary, here's the code:
function playerReady(obj) {
document.getElementById('player-embed').addModelListener(
"TIME", "handleTimeEvent");
}

function handleTimeEvent(e) {
console.log(window.timeEvent.duration);
console.log(window.timeEvent.position);
}

Comments

Jeroen Wijering said…
Thanks for your posting. You totally confirm what we feel to be the "pain points" in our current API. Unfortunately, these issues directly relate to communication restrictions on a lower level, between actionscript and javascript.

For the next release of the Flash version of our player (5.3), we are working on a dedicated javascript wrapper (something like SWFObject) that will work around these issues:

*) Listeners assigned before the player is "ready" will be queued up by the wrapper.
*) Support for jQuery will be added.
*) Function references will be translated to strings inside the library.

Would love to hear any other suggestions people have for improving our javascript API!
Unknown said…
hmm, can't an error message be generated that is kept as an internal string if you try to set an event handler too early and then when the player is all set up it get then log the internal string?
jjinux said…
Hi, Jeroen, thanks for your response!

I'm not actually complaining ;) I've had a much harder time coping with Boxee than I have coping with JW Player. About the only thing that really sticks out to me about JW Player's JavaScript API is that obj["id"] doesn't work as promised in playerReady.

> Unfortunately, these issues directly relate to communication restrictions on a lower level, between actionscript and javascript.

Yep, that's what I figured.
Anonymous said…
This comment has been removed by the author.
Unknown said…
Hi, I have a BIG QUESTION: ¿How do I "execute" an actionscript function? I have to execute it in order to get a decrypted URL by changing some variables... the thing is:

1) You have an URL

2) Somehow it pass trough a function
and it returns it a different result in base of the function's work. BUT I DON'T KNOW HOW TO EXECUTE IT!! ¿Can you help me?
jjinux said…
You're going to have to modify the source code for JW Player itself. Take a look at the file named JavascriptCompatibilityAPI.as, especially the calls to ExternalInterface.addCallback.

Popular posts from this blog

Drawing Sierpinski's Triangle in Minecraft Using Python

In his keynote at PyCon, Eben Upton, the Executive Director of the Rasberry Pi Foundation, mentioned that not only has Minecraft been ported to the Rasberry Pi, but you can even control it with Python. Since four of my kids are avid Minecraft fans, I figured this might be a good time to teach them to program using Python. So I started yesterday with the goal of programming something cool for Minecraft and then showing it off at the San Francisco Python Meetup in the evening.

The first problem that I faced was that I didn't have a Rasberry Pi. You can't hack Minecraft by just installing the Minecraft client. Speaking of which, I didn't have the Minecraft client installed either ;) My kids always play it on their Nexus 7s. I found an open source Minecraft server called Bukkit that "provides the means to extend the popular Minecraft multiplayer server." Then I found a plugin called RaspberryJuice that implements a subset of the Minecraft Pi modding API for Bukkit s…

Apple: iPad and Emacs

Someone asked my boss's buddy Art Medlar if he was going to buy an iPad. He said, "I figure as soon as it runs Emacs, that will be the sign to buy." I think he was just trying to be funny, but his statement is actually fairly profound.

It's well known that submitting iPhone and iPad applications for sale on Apple's store is a huge pain--even if they're free and open source. Apple is acting as a gatekeeper for what is and isn't allowed on your device. I heard that Apple would never allow a scripting language to be installed on your iPad because it would allow end users to run code that they hadn't verified. (I don't have a reference for this, but if you do, please post it below.) Emacs is mostly written in Emacs Lisp. Per Apple's policy, I don't think it'll ever be possible to run Emacs on the iPad.

Emacs was written by Richard Stallman, and it practically defines the Free Software movement (in a manner of speaking at least). Stal…

JavaScript: Porting from react-css-modules to babel-plugin-react-css-modules (with Less)

I recently found a bug in react-css-modules that prevented me from upgrading react-mobx which prevented us from upgrading to React 16. Then, I found out that react-css-modules is "no longer actively maintained". Hence, whether I wanted to or not, I was kind of forced into moving from react-css-modules to babel-plugin-react-css-modules. Doing the port is mostly straightforward. Once I switched libraries, the rest of the port was basically:
Get ESLint to pass now that react-css-modules is no longer available.Get babel-plugin-react-css-modules working with Less.Get my Karma tests to at least build.Get the Karma tests to pass.Test things thoroughly.Fight off merge conflicts from the rest of engineering every 10 minutes ;) There were a few things that resulted in difficult code changes. That's what the rest of this blog post is about. I don't think you can fix all of these things ahead of time. Just read through them and keep them in mind as you follow the approach above.…