AppJet, Server-side JavaScript and YouTube Annotations
Whenever I've needed something small done on the server-side, I've always ended up with PHP since I know it, there's no setup and it can do a whole bunch of stuff. I just don't enjoy writing PHP in any way and I just wish I could do stuff on the server with JavaScript as easily as with PHP. Last time I went looking (long time ago) there wasn't really any options that looked good enough but it seems that things have changed a bit. There are more than a few server-side JS solutions available today, but two of them struck me as interesting even if they were not exactly what I was looking for. One of them was AppJet which launched its service late last year. What it does is let you write your server-side JavaScript application in a simple online IDE and then host it at http://<appname>.appjet.com/ all with just a few clicks.
I wouldn't attempt to put the next Facebook or Twitter on AppJet, but for the purpose of writing small and simple applications on the server in JavaScript, I think it's just awesome. The small app I wrote (click the "source" link at the bottom to view the source) to test it out is a proxy of sorts for the YouTube annotation script I posted a few months ago, and it was quite a pleasant experience due to the very short path from idea to actually seeing something happen. AppJet has of course all the needed JavaScript functionality and also provides a few extra features like persistent storage and HTTP access. Nothing really impressive, but there's also a directory of user written JS libraries that you can import to add more functionality. Anyway, this YouTube annotation application simply retrieves the XML from Google's server, converts it to JSON data and either spits it out raw or calls a specified callback function. I've modified the proof-of-concept YouTube annotation player to use this instead of the PHP proxy it was using earlier, simplifying the client-side JS a lot.
The other SSJS solution I've been looking at is Aptana Jaxer which is something entirely different. I have only just gotten it up and running, but I hope to get time to take a deeper look at it when I return from a bit of vacationing in Paris next week. If you have any experience with any of the server-side JavaScript options, please leave a comment and share your thoughts! Read more...
I wouldn't attempt to put the next Facebook or Twitter on AppJet, but for the purpose of writing small and simple applications on the server in JavaScript, I think it's just awesome. The small app I wrote (click the "source" link at the bottom to view the source) to test it out is a proxy of sorts for the YouTube annotation script I posted a few months ago, and it was quite a pleasant experience due to the very short path from idea to actually seeing something happen. AppJet has of course all the needed JavaScript functionality and also provides a few extra features like persistent storage and HTTP access. Nothing really impressive, but there's also a directory of user written JS libraries that you can import to add more functionality. Anyway, this YouTube annotation application simply retrieves the XML from Google's server, converts it to JSON data and either spits it out raw or calls a specified callback function. I've modified the proof-of-concept YouTube annotation player to use this instead of the PHP proxy it was using earlier, simplifying the client-side JS a lot.
The other SSJS solution I've been looking at is Aptana Jaxer which is something entirely different. I have only just gotten it up and running, but I hope to get time to take a deeper look at it when I return from a bit of vacationing in Paris next week. If you have any experience with any of the server-side JavaScript options, please leave a comment and share your thoughts! Read more...
YouTube Annotations, round 2
Made a few changes to the annotations script.
For now, I've scrapped the overlayed annotations since it was just too buggy and unstable. It didn't work reliably in enough browsers for it to be worthwhile and it was pretty meaningless anyway.
The script now adds a hidden form field which is updated with the current annotation text every time an annotation is added or removed. This should help screen readers know that something changed, I've been told. However, I'm not sure how to handle multiple overlapping annotations, since you wouldn't want the same text read again just because a second annotation is shown. As it is now, all "active" annotations are put in the same form field. Maybe it needs a whole bunch of hidden fields? Read more...
For now, I've scrapped the overlayed annotations since it was just too buggy and unstable. It didn't work reliably in enough browsers for it to be worthwhile and it was pretty meaningless anyway.
The script now adds a hidden form field which is updated with the current annotation text every time an annotation is added or removed. This should help screen readers know that something changed, I've been told. However, I'm not sure how to handle multiple overlapping annotations, since you wouldn't want the same text read again just because a second annotation is shown. As it is now, all "active" annotations are put in the same form field. Maybe it needs a whole bunch of hidden fields? Read more...
YouTube Annotations and JavaScript
YouTube recently added a new annotation feature, but at the moment it's still beta and annotations only show up on youtube.com and not on embedded videos. It's a neat feature in itself, but as Chris Heilmann posted, it would be nice if there was an API available to access those annotations.
So, I went and looked and made an attempt at accessing and using these annotations with Javascript and embedded videos. The annotations are available as XML data and I've used two lines of PHP to retrieve the XML and feed it raw to the JS. Then my horribly inefficient approach uses a timer with a short interval that runs through all annotations and checks which ones are currently visible. It fires two custom events on the player object when an annotation is either added or removed.
I even tried to render the annotations on top of the video, but putting DOM stuff on top of Flash isn't always fun. It depends on changing the movie's "wmode" parameter something other than "window" and in some browsers that stalls the timer while the video is playing.
Only FF3 (maybe FF2?) and Safari can do both the events and the overlayed annotations, it seems.
I suppose if we just skip the whole overlayed annotations thing and wait for them to show up in embedded videos, everything will be fine.
Check it out here, but be warned. It's not very stable, and I've managed to make both FF, Opera and IE crash. Reloading the page before loading a new video might help.
Edit: The overlayed annotations have been scrapped, since it just wasn't stable enough. Read more...
So, I went and looked and made an attempt at accessing and using these annotations with Javascript and embedded videos. The annotations are available as XML data and I've used two lines of PHP to retrieve the XML and feed it raw to the JS. Then my horribly inefficient approach uses a timer with a short interval that runs through all annotations and checks which ones are currently visible. It fires two custom events on the player object when an annotation is either added or removed.
I even tried to render the annotations on top of the video, but putting DOM stuff on top of Flash isn't always fun. It depends on changing the movie's "wmode" parameter something other than "window" and in some browsers that stalls the timer while the video is playing.
Only FF3 (maybe FF2?) and Safari can do both the events and the overlayed annotations, it seems.
I suppose if we just skip the whole overlayed annotations thing and wait for them to show up in embedded videos, everything will be fine.
Check it out here, but be warned. It's not very stable, and I've managed to make both FF, Opera and IE crash. Reloading the page before loading a new video might help.
Edit: The overlayed annotations have been scrapped, since it just wasn't stable enough. Read more...
