Blogs

Integration with Overlay’s services was somewhat easier. They have a published API but unfortunately for this project, it is intended for use on other websites, so it did not make sense in a client application.

Overlay also has a flash movie that they use in their pages to support viewing, creating and editing overlays. The flash movie is an AS2 movie, so I was not able to load it directly, but instead ended up creating an HTML control and dynamically modifying the flashvars to get at the functionality we needed. ( BTW I love the HTML control in Air! ) The Flash movie already implemented 100% of overlay’s functionality, so I was very glad to be able to use it directly.

Working closely with Overlay, I was given instructions on how to authenticate a user and get xml back.  For getting the list of the current user’s overlays we consumed just grabbed the user’s rss feed.Â

So go check out the Overlay.tv YouTube uploader and start making some overlays!. Â

Your feedback is welcomed.

Cheers,

  Jesse

Â

I recently had the opportunity to work on an interesting project. Overlay.tv offers a service that allows their users to create overlays of YouTube videos by adding contextual items like text, links, and product ads. Overlay.tv wanted an Air application to help introduce new users to their service. Overlay does not host the movies that are the source of the overlay, and their largest source of overlays is YouTube videos. As an added value to YouTube users the application needed to allow users to quickly and easily upload videos ( to YouTube ) and then quickly turn those same videos into Overlays.

I was late in joining this project, so much of the above had already been decided for me, as well as the UX-design and a signed off UI-prototype, so I began where I always do, with what I thought was the most challenging and the greatest risk: Uploading to YouTube.

YouTube - functionality

After looking through YouTube’s exhaustive api documentation, it seemed like it would be easy to work with, and I had the basics worked out in a hurry. I was able to authenticate a user, and get the list of their uploaded videos. Great, on to the uploading… not so fast.

While researching YouTube’s API, I also spent some time looking at blog posts and opensource projects related to YouTube. I did not see any opensource projects that allowed uploading to YouTube, and originally just saw this as an opportunity, but later found it was obstacle. The long and the short is that YouTube’s uploading mechanism requires special headers to sent in the HTML post, and AS3′s File.upload method does not allow custom headers. After several failed attempt to get anything working, I looked around some more, and found that many other people were compaining about the same thing. There has to be a way …

Going back to YouTube’s API documentation, I discovered that there is another API for uploading, but it is intended for websites to allow their users to upload directly to YouTube from another site. The way it works is, the meta information is first posted to YouTube, and a response is returned that contains a temporary session key, and a unique url that the server can post to. That’s it! So my upload functionality had to be broken into 2 server calls instead of 1, big whoop, I had a proof of concept going in no time, and was back on track.

Nitobi embrasses opensource, so I immediately identified this functionality as something that would be shared with the community and approached the YouTube AS3 API implementation as a black-box that should be reusable. I made sure that there were no dependancies on other libraries, defined an interface and event model that made sense in the context that it was needed and was off to the races. ( Note: The YouTube Air/AS3 portion of this project will be made opensource and the subject of future more technical blog posts )

Integration with Overlay.tv will be discussed in the next installment, so check back soon …

J

Â

Â

Â

Â