Tutorial: YouTube Channel/Playlist Videos via Data API v3 auf der eigenen Website ausgeben


Man hat einen YouTube Channel und möchte die Videos daraus auch auf der eigenen Website einbinden. Jetzt kann man das Ganze natürlich manuell machen indem man zu jedem Video das Codeschnipsel zur Einbettung in die eigene Website integriert. Das bedeutet aber, dass ich mit jeden neuen Video Upload auch meine Website aktualisieren muss. Abhilfe schafft hier die von Youtube bereitgestellte API v3 mit der ich in der Lage bin, Channel-, Playlist- und Videoinformationen abzurufen und zu verarbeiten. Da dieser Abruf immer auf den aktuellen Inhalten meines Youtube Channels basiert, werden somit auch die eingebundenen Videos auf der Website automatisch aktualisiert. Ein weiterer Vorteil der Youtube API ist, dass man die Ausgabe auf der eigenen Website flexibel steuern kann, mein Demo zeigt hier nur 3 verschieden Möglichkeiten.

Schritt 1 – Voraussetzungen

Um die Youtube API v3 nutzen zu können benötigen wir ein Google/Youtube Konto und einen Youtube API Key. Das Tutorial beschränkt sich jetzt darauf entweder alle Channel Videos auszulesen oder nur Videos einer bestimmten Playlist. Für beide Varianten benötigen wir die spezifische Playlist ID. Die API selbst bietet darüber hinaus viele weitere Möglichkeiten Videos auszulesen (z.B. Kategorie, Searchstring).  Ich gehe davon aus, dass ein gefüllter Youtube Channel bereits vorhanden ist und somit auch ein Google Konto. Starten wir mit;

Youtube API Key besorgen

Hier Google API Console einloggen! Die Google API Console ist die zentrale Anlaufestelle für alle Google APIs. Um nun einen Youtube API Key zu generieren am besten dieses Video  anschauen.

Playlist ID besorgen -> alle Channel Uploads

Die Playlist ID kann ich durch Aufruf meiner Youtube Channel Infos ermitteln. Tauscht einfach „DEIN YOUTUBE USERNAME“ mit euren Usernamen und führt die Anfrage aus. Unter dem Formular könnt ihr im Bereich „Response“ das Ergebnis der Abfrage ablesen. Der Code hinter „uploads“ entspricht dabei der gewünschten Playlist ID. Darüber hinaus kann ich hinter „id“ auch meine Channel ID ermitteln.

Playlist ID besorgen -> Videos einer bestimmten Playlist

Die ID einer bestimmten Playlist erhalte ich ebenfalls über den Google API Explorer. Dazu benötige ich meine Channel ID, die ich entweder im internen Youtube Bereich unter „Einstellungen“ ablesen kann oder ich nutze oben gezeigte Abfrage der Channel Uploads die mir gleichzeitig auch meine Channel ID ausgibt. Hier kann ich mir alle Channel Playlists anzeigen lassen. „DEINE CHANNEL ID“ mit eurer Channel ID ersetzen und Abfrage ausführen. Im „Response“ Bereich unter dem Formular findet ihr dann eine Übersicht euer Playlists. Identifiziert anhand des „title“ die gewünschte Playlist. Wir benötigen dann den Code hinter „id„, welcher in der Regel mit PL.. beginnt.

Schritt 2 – Youtube API abfragen

Im Grunde haben wir oben bereits die Youtube API abgefragt und wie ihr vielleicht gesehen habt, konnte man im Bereich „Request“ unter dem Formular die Abfrage selbst ablesen. Das folgende Beispiel ist von mir bereits vorbereitet und holt alle relevanten Infos zu Videos einer Playlist ab. Die Anzahl ist dabei auf 0-50 Videos begrenzt, möchtet ihr mehr ausgeben lassen, dann benötigt ihr eine Paging Funktion, auch hierfür bietet die API Einsatzmöglichkeiten auf die ich jetzt aber nicht eingehe, da das Tutorial „quick & dirty“ zum Ergebnis führen soll.

Muster API Abfrage: 

Was macht diese API Abfrage jetzt eigentlich? Sie generiert eine JSON Datei! JSON ist ein Datenformat zum Datenaustausch, ähnlich einer XML Datei nur deutlich kompakter. Ersetzt am besten oben gezeigte Musterabfrage mit eurer Playlist ID und eurem API Key und ruft die Abfrage im Browser auf. Dort ist sehr schön Struktur und Aufbau einer JSON Datei zu erkennen.

Schritt 3 – Verarbeitung der API Abfrage mit PHP

Zur Verarbeitung einer JSON Datei stehen in allen wichtigen Programmiersprachen Möglichkeiten zur Verfügung. Ich werde in meinen Beispielen dafür PHP verwenden und in Kombination mit HTML und CSS eine Ausgabe erzeugen. Da die API Abfrage eine Datei erzeugt fangen wir damit an die Datei mittels PHP zu lesen. Dazu gibt es zwei gängige PHP Funktionen, zum einen „file_get_contents“ und die „cURL“ Funktion. Ich werde Zweitere nutzen, weil sie mich nach dem Lesen von René Galubas Blogartikel mehr überzeugt. Das Codeschnipsel zum cURL Aufruf einer Datei habe ich anhand des Beispiels auf Renés Seite übernommen.

Gehen wir kurz durch den Code. Die get_data() Funktion erleichtert das Datei lesen und ist auch für andere Dateien wiederverwendbar und nicht auf die JSON Datei der Youtube API beschränkt. In der $api Variable speichern wir den API Aufruf. Das Ergebnis ist wie erwähnt im JSON Format angelegt. Um es jetzt mit PHP verarbeiten zu können, müssen wir es erst umformatieren. Die PHP Funktion json_decode() formatiert JSON Inhalte zu einem PHP Array, mit der Zusatzanweisung true geben wir an, dass es sich um einen assoziativen Array handeln wird. Der assoziative Array wird in der Variable $video gespeichert, mit der wir jetzt weiterarbeiten.

4. Schritt – Ausgaben erzeugen

Grundlage für alle Ausgaben ist jetzt unser PHP Array $video (Demo Array). Mit den Schritten 1 – 3 haben wir die Pflicht erledigt, kommen wir nun zur Kür. Arbeiten wir uns Stück für Stück durch den Array und nutzen Schleifen zur Ausgabe. An dieser Stelle möchte ich mein Array Tutorial empfehlen, welches unter anderem zeigt wie man auf Einzelwerte in verschachtelten Arrays zugreift. Im Folgenden werde ich zwei Varianten vorstellen.

Ausgabe im abspielbaren Iframe

Das ist im Grunde die minmalste Form der Einbindung. Aus dem $video Array benötige ich dazu lediglich die Video ID. Den Code zum Einbetten via Iframe gibt es als Beispiel unter jedem Video bei Youtube. Um hier die Ausgabe zu erzeugen, reicht es die entsprechende Video ID mit der Video ID aus unserem Array zu ersetzen. Die foreach Schleife sorgt dafür, dass alle Videos meines Arrays ausgegeben werden. Ich habe den Iframe in einen div Container gepackt, so kann ich via CSS das Styling beeinflussen.

Mit diesem CSS Schnipsel werden die Videos nebeneinander angezeigt, ansonsten ist die Beispielseite unformatiert. Über die Standardeinbettung hinaus bietet Youtube erweiterte Optionen, diese könnt ihr mit der Youtube Player API testen und euch so den gewünschten Einbettcode zusammenbasteln.

Ausgabe als Thumbnail mit Titel Lightbox Verlinkung

Dieses Beispiel greift auf mehrere Werte meines $video Arrays zurück. Neben der Video ID benötige ich den Video Titel und ein Video Thumbnail. Die CSS Formatierung ist wieder minimal gehalten, damit ihr diese Beispielseite als Grundlage für eure eigene Lösung nutzen könnt. Für diese Variante benötigt ihr ein zusätzliches Lightbox Plugin. Die meisten Lightbox Scripte verfügen über die Abspielfunktion von Videos, mein Standard Lightbox Plugin ist Magnific Popup. Die folgend gezeigte Einbindung der Lightbox bezieht sich daher auf dieses Plugin. Hier könnt ihr natürlich auch jede andere Youtube fähige Lightbox nutzen.

Hinweise

Wie oben bereits erwähnt, ist das eine „quick & dirty“ Lösung, welche für viele Einsatzzwecke ausreichen sollte. Für diejenigen die umfangreicher mit Google APIs oder mit mehreren Google APIs gleichzeitig arbeiten möchten, stellt Google für alle wichtigen Programmiersprachen eine Google API Client Library zur Verfügung. Diese bedarf zwar der Einarbeitung, bietet dann aber eine strukturierte und umfangreiche Kontrolle bei der Arbeit mit Google APIs.

Das Download Paket beinhalte oben gezeigte Beispiele, diese sind weitesgehend unformatiert und eignen sich daher gut als Arbeitsgrundlage. Die Demoseite basiert auf Bootstrap und greift daher auf Stylinginformationen dieses Frameworks zurück.

Demo Download Code

Hinweis in eigener Sache!

Das Script ist meine persönliche Lösung, ich erhebe keinen Anspruch darauf, dass diese auch die Beste ist. Änderungen, Verbesserungen und Optimierungen am Script sind ausdrücklich erlaubt. Die Benutzung des Scriptes erfolgt auf eigene Gefahr. Für eventuelle Schäden, die durch den Einsatz bzw. die Nutzung des Scriptes entstehen, übernehme ich keine Haftung.

10.06.2014 Autor: Rico Loschke Kategorie: Demos & Tutorials 0



11 Antworten zu “Tutorial: YouTube Channel/Playlist Videos via Data API v3 auf der eigenen Website ausgeben”

  1. Dominator sagt:

    Guten Abend / Morgen,

    wollte nur mal sagen das dein Code nicht funktioniert.
    Das Array was du duch json_decode() erzeugst ist leer.

    Ich habe dein Code mal getestet und auch selber mit Multi cURL das ganze versucht, leider geht das nicht.

    Ich mache das so:
    $data = json_decode(file_get_contents(„“, true), true);

    Gruß Dom =)

    • sevenx sagt:

      Mmhhh, die gezeigten Demos basieren auf dem im Blog dargestellten Code, scheint also zu funktionieren. Warum es bei dir nicht klappt, kann ich nicht nachvollziehen, aber danke für deine Lösung, vielleicht taucht das Problem bei anderen auch noch mal auf.

  2. Heiko sagt:

    Cooles Tutorial. Danke. Schade, dass der TV Carousel nicht direkt dabei ist.

  3. Reinhold sagt:

    Hi,

    das script funktioniert wunderbar und die Beschreibung ist auch super. Nur das ich den ganzen Kanal einbinde will mir irgend wie nicht gelingen.

    Gruß Reinhold

  4. Matthes sagt:

    Danke, dein Tutorial hat mir echt geholfen.
    Die Google-Dokumentation der neuen API – gemischt damit, dass ich nie wirklich PHP gelernt habe… werfen erstaunliche Ergebnisse ab 😉
    Danke also noch mal!
    Matthes

  5. Thilo sagt:

    Hallo.
    Endlich mal einen Fortschritt bei der Suche nach einem fähigen Script.
    Mein Problem ist nur das ich das aktuelleste Video eines Kanal auf eine Homepage angezeigt bekomme, ohne es umständlicherweise noch in eine Playlist packen zu müssen.
    Ich finde aber dafür nicht die passende Datei in der API um das abzufragen.
    Ist sowas überhaupt möglich?
    Welche Parameter wären dann noch nötig, um eine passende Antwort von der API zu erhalten?

    MfG

  6. eMBe sagt:

    Hi, ich bekomme es einfach nicht zum laufen.
    Schon der Link mit Playlist-Id und API-Key erzeugt im IE einen Fehler, im FF funktioniert er.
    Dann aber kommt ein leeres Array zurück:
    Die Methode von Dominator hab ich nicht ganz gerafft, kannst du mal bitte den entsprechenden gesamtCode bereitsstellen.

    Thy@all

  7. eMBe sagt:

    Hi, ich nochmal,
    also dir URL funzt jetzt überall, war mein fehler 🙁

    Aber – die Funktion:
    function get_data($url)
    {
    $ch = curl_init();
    $timeout = 5;
    curl_setopt($ch,CURLOPT_URL,$url);
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
    curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
    }
    gibt schon leeren Inhalt zurück
    Also echo $data = nix
    auch print_r($data) = nix

    Bitte bitte schnell helfen, bin froh endlich so ein einfaches und gut erklärtes TUT gefunden zu haben, jetzt muss es nur noch funktionieren.

    Thx Thx Thx

  8. eMBe sagt:

    So!!! – funktioniert es:
    function getdata($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_REFERER, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
    }

  9. Alani sagt:

    Nettes Script, es ist tatsächlich nicht schwer mit der API V3. Ich bin nur auf der Suche nach einer JS Variante.

  10. Sascha sagt:

    Danke Rico für die Code Snippets.
    Ich konnte mir so ein Script bauen, um eine Playlist als RSS auszugeben.

    Falls interesse besteht:
    https://github.com/Cetheus/YouTube2RSS

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.