Vernetzung aller Orten. Auch auf dieser Site. Denn wozu sammelt man Videos in einer Favoritenliste?
Wieder einmal ist eine kleine Ergänzung auf dieser Site online. YouTube bietet so hervorragende APIs, dass man beinahe nicht umhin kommt, sich auch einmal damit zu beschäftigen. So ist die YouTube-Favoriten-Box entstanden. Mangels eines besseren Platzes ist sie im Footer der Homepage zu finden. Und nur dort.
Die Server-Seite – ein kurzer Überblick
- Zunächst wird der Atom-Feed des eigenen Benutzeraccounts auf YouTube geladen.
- Das erhaltene XML wird geparst, die relevanten Informationen in eine Liste gepackt. Diese wird noch ein wenig durchgerüttelt, damit sich nicht immer nur die zuletzt hinzugefügten Videos darin befinden.
- Damit nicht bei jedem Seitenaufruf erneut ein API-Request an YouTube erfolgt, wird die Liste im Memcache mit einer Verfallszeit von zehn Minuten abgelegt.
- Die Liste wird an das Template übergeben, welches für die Ausgabe auf der Client-Seite sorgt.
Die Client-Seite
Auf der Browser-Ebene kommt eine Kombination verschiedener jQuery-Plugins zum Einsatz:
- jCarousel Lite für das “Carousel” (Karussell). Das läuft zwar nicht im Kreis, aber der Klick auf die Pfeile fördert den bekannten Effekt zutage.
- Die Tooltips für die Anzeige der Video-Titel sind dem Beitrag Easiest Tooltip and Image Preview Using jQuery entliehen. Ich habe einige Zeit mit der Suche nach Tooltip-Plugins verbracht, doch keines war einfacher, verständlicher und nützlicher als dieses. Der Code musste minimal angepasst werden, damit die Tooltips nicht nur bei URLs, sondern bei beliebigen Elementen funktionierten.
- Zuletzt kommt für die Anzeige der Videos innerhalb eines Layers die bekannte ThickBox Library zur Anwendung. Der angezeigte Inhalt wird dabei mittels Ajax nachgeladen, eine entsprechende View sorgt nach Übergabe der YouTube Video-ID für die Ausgabe des Codefragments, was zur Einbettung des YouTube-Videos zuständig ist.
Fertig. Zwar noch nicht ganz perfekt – leider erlaubt YouTube bei speziellen Videos nicht die externe Einbindung, weshalb in diesen Fällen nur eine lapidare Fehlermeldung erscheint. Dies müsste bei der Generierung der Liste noch berücksichtigt werden. Aber ohne Raum zur Verbesserung wäre es ja auch langweilig…
