Voor Pukkelpop hadden we het concept bedacht dat we de bezoekers van de site alle bands van vroeger en nu wensten voor te stellen. Het was al snel duidelijk dat we bepaalde informatie extern zouden inladen. Als je weet dat we meer dan 5.000 filmpjes wensten weer te geven was het onbegonnen werk om deze zelf op te zetten, vandaar dat we kozen voor de Youtube API voor alle video's. Via deze blogpost willen we kort even een zicht geven op deze API en hoe we dit geïntegreerd hebben op Pukkelpop.be

Het concept van de bands/artiestenpagina's van de nieuwe Pukkelpop site bestond er uit dat er geen verschil werd gemaakt tussen bands die in 1988, 1998 of 2008 op de podiums stonden of de editie van 2009. Elke band werd met het nodige beeldmateriaal aan de bezoeker voorgesteld. De beheerders van de site konden op hun beurt gemakkelijk en snel meerdere filmpjes koppelen aan de bands, ze zouden hiervoor zelfs onze WebAdmin (CMS) niet moeten verlaten.

Stap 1: YouTube API protocol

Een eerste stap bij het gebruik van een externe API is onderzoeken wat er allemaal mogelijk is en welke beperkingen er zijn. Aangezien YouTube een onderdeel van Google is waren er zoals verwacht meer mogelijkheden dan beperkingen. De YouTube API biedt verschillende mogelijkheden om te zoeken naar filmpjes, maar uiteindelijk bleek zoeken via "video feeds" al voldoende te zijn voor onze opzet. Uit de API documentatie werd duidelijk welke parameters nodig waren voor onze zoekopdracht en het was in mijn geval niet nodig om in te loggen of een API key aan te vragen.

Stap 2: Opvragen en verwerken van de gegevens

Aangezien we de videoclips per band wilden toevoegen gingen we zoeken op basis van de bandnaam. Een URL ziet er als volgt uit: http://gdata.youtube.com/feeds/api/videos/?q=Bloc+Party&start-index=1&max-results=50. Er worden in dit geval de eerste 50 resultaten naar "Bloc Party" opgevraagd. YouTube geeft ons een uitgebreid XML bestand terug. Uit dit XML bestand worden de volgende gegevens gehaald en opgeslagen in de Pukkelpop database:

• Video id ("66xxck1TV-Y")
• Auteur ("cahawks")
• Titel ("Bloc Party - One Month Off")

Stap 3: Grafische admin module

Voor het beheer van de YouTube video's moest ik rekening houden met de volgende criteria:

• Er moet vrij gezocht kunnen worden naar filmpjes
• Een filmpje moet goedgekeurd of afgekeurd kunnen worden en gekeurde filmpjes mogen niet meer verschijnen in nieuwe zoekresultaten
• Het moet makkelijk zijn om een preview te bekijken
• De volgorde van goedgekeurde filmpjes moet vrij bepaald kunnen worden

Al deze functionaliteit heb ik op een simpele en overzichtelijke manier samengebracht binnen één Extjs dialoogvenster. Via een dropdown menu kunnen de gekeurde videos van de geselecteerde band opgevraagd worden of kan er direct worden gezocht naar nieuwe filmpjes. Door op de foto links te klikken begint de preview te spelen en de volgorde wordt dan weer bepaald door items simpelweg naar een andere plaats te slepen.

Stap 4: Video embedden in de website

Op basis van het opgeslagen video id kunnen we makkelijk thumbnails opvragen van YouTube en een embed code genereren voor het filmpje:

Het bovenstaande stukje code plaatst de clip op de Pukkelpop website, meer heb je dus niet nodig om dit te voorzien op een bepaalde website.

Dankzij de goede documentatie die Google aanbiedt was het gebruik van de YouTube API snel duidelijk. Het XML bestand met zoekresultaten leek op het eerste zicht ingewikkeld, maar uiteindelijk zijn hiervan slechts enkele gegevens echt nodig. Verder was het vooral van belang dat de opgevraagde gegevens op een gebruiksvriendelijke manier beheerd konden worden. Hier zijn we voor Pukkelpop zeker in geslaagd.