YouTube player added to Top Albums interactive

You can view the final interactive Flash version here:

The original idea behind this interactive was to provide a way for people (i.e. me) to be able to explore the best of the end of year top album charts and discover new music. As there was currently no way to actually listen to any of this music and as I have also been keen to mess around with streaming video it seemed like a good idea to build in video search with a video player.

I used the YouTube data API to handle the search query. The results are returned as XML which is easy enough to pass and than display the results. There do seem to be some issues with the YouTube data as some videos are marked as syndicated but they still play whilst others are marked as playable but come up with a syndication warning – i.e. anything from Sony Music Entertainment!

There where also some issues with the YouTube embedded player (assuming I am not doing something wrong) as it constantly crashes the Flash IDE. In the end I would only test/preview in the browser. There seems to be some issues with the ytplayer.destroy() and after some searching around I found a forum post that claimed the only way to fix this was to run a whole bunch of different remove, unload, destroy calls. Doesn’t seem to be the most elegant solution but it did seem to work.

Here are some links to resources/tutorials etc that I used to put this together:

I still have a couple of little things to do with the search results scroll and page navigation and also some message handling for “no results” but I really wanted to get this up and start playing with it.

Deep link to the player:

Related Posts:

  • No Related Posts
This entry was posted in Data Visualisation, Interactive Data, Lab Examples and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>