Bild vergrößern 937 725 http://img1.magnus.de/Youtube-Widgets-programmieren-in-Bildern-r937x724-C-483078a2-29430776.jpg

Youtube Widgets, die Zweite

Mit den Widgets von YouTube präsentieren Sie auf Ihrer Webseite eine dynamische Auswahl von Videos, ohne dafür serverseitige Skriptsprachen studieren zu müssen. Das Video Search Control ist nicht nur leicht einzurichten, es bietet Ihren Besuchern auch einen ganz besonderen Komfort.

Anders als bei der Video Bar benötigen Sie für das Video Search Control einen sogenannten AJAX Search API Key. Diesen besorgen Sie sich auf der Seite http://code.google.com/intl/de-DE/apis/ajaxsearch/signup.html.

Geben Sie in das untere Textfeld die URL Ihrer Homepage ein, aktivieren Sie das Kontrollkästchen I have read and agree with the terms and conditions, wenn Sie mit den Bedingungen einverstanden sind und klicken anschließend auf die Schaltfläche Generate API Key, um den Schlüssel anlegen zu lassen.

Dieser erscheint nun im ersten Feld auf der Folgeseite, unterhalb von Your key is:. Wundern Sie sich bitte nicht weiter über dessen Länge. Der AJAX Search API Key gilt für alle Unterverzeichnisse. Im Übrigen können Sie jederzeit weitere Schlüssel generieren lassen, sogar für dieselbe Webseite. Mit dem Schlüssel greifen Sie auf alle Methoden der Schnittstelle zu.

AJAX Search API Key

Als Erstes laden Sie im Code die JavaScript-Dateien für die Google AJAX Search API und das Video Search Control sowie die vordefinierten CSS-Dateien gsearch.css und gsvideosearch.css:

Codebeispiel:

In der ersten Zeile ersetzen Sie das Wort KEY durch Ihren AJAX Search API Key, wie

Codebeispiel:

Denken Sie daran, ebenso zu verfahren, wenn Sie die Dateien der Heft-DVD (videosearchcontrol1.htm, videosearchcontrol2.htm) testen. Sie finden an der entsprechenden Stelle jeweils den Text [Geben Sie hier Ihren AJAX Search API Key ein] vor – die eckigen Klammern löschen Sie ebenfalls.

Google AJAX Search API

Für die Funktion des Video Search Controls zeichnet nun der folgende JavaScript-Code verantwortlich, den Sie am besten ebenfalls im Head-Bereich Ihrer HTML-Seite platzieren. Das Control selbst erzeugen Sie innerhalb der Funktion LoadVideoSearch() mit einer GSvideoSearchControl-Instanz.

Codebeispiel:

Der Konstruktor besitzt fünf Parameter, von denen man gewöhnlich nur die ersten beiden sowie den letzten verwendet. Der dritte und der vierte Parameter sind optional und dafür vorgesehen, um programmseitiges Suchen zu speichern und gegebenenfalls wieder zu verwenden. Mit dem ersten Parameter verbinden Sie das Search Control mit dem gewünschten Container auf der HTML-Seite.

Bild vergrößern 937 723 http://img4.magnus.de/Youtube-Widgets-programmieren-in-Bildern-r937x722-C-cae03598-32432137.jpg Bequemer Einstieg: Der Video Search Control-Codegenerator liefert den AJAX Search API-Schlüssel gleich mit.

Bequemer Einstieg: Der Video Search Control-Codegenerator liefert den AJAX Search API-Schlüssel gleich mit.

Dazu weisen Sie diesem im Body-Teil Ihrer Webseite eine eindeutige ID zu (in den Beispielen < div id=“videosearch“>

), welche Sie dann der Methode getElementById() als Parameter übergeben. Mit dem zweiten Parameter legen Sie die Suchbegriffe fest, die Sie als Array übergeben.

Codebeispiel:

Bild vergrößern 552 392 http://img4.magnus.de/Youtube-Widgets-programmieren-in-Bildern-r552x392-C-7c38d35-32432140.jpg Video Search Control auf der Webseite: Der Besucher bestimmt die Auswahl der Videos, indem er einen vordefinierten Suchbegriff anklickt oder über das Suchfeld eine eigene Suche startet.

Video Search Control auf der Webseite: Der Besucher bestimmt die Auswahl der Videos, indem er einen vordefinierten Suchbegriff anklickt oder über das Suchfeld eine eigene Suche startet.

Die Tags für eine Suche notieren Sie im Array hinter query: in Anführungszeichen. Falls Sie kein Label angeben, werden die Suchbegriffe auch als Verknüpfungstext verwendet, allerdings ohne Leerzeichen. Bei mehreren Suchbegriffen empfiehlt es sich daher – nach einem Komma getrennt, hinter label: –, einen Verknüpfungstext explizit anzugeben. Wahlweise können Ihre Besucher in ein Suchfeld eigene Tags eingeben.

Dabei handelt es sich nicht etwa um die Suche der Google-Website. Gesucht wird ausschließlich nach Videos auf den Servern von YouTube. Den options-Parameter übergeben Sie dem GSvideoSearchControl-Konstruktor ebenfalls als Array. Wenn Sie in diesem die Eigenschaft twoRowMode auf true setzen, zeigt das Control, in Abhängigkeit von seiner Größe, als Ergebnis einer Suche bis zu acht Videos.

Bei der Standardeinstellung, die twoRowMode : false entspricht, sind es nur vier. Der Eigenschaft string_allDone weisen Sie den Text zu, der über dem Video Player als Verknüpfung erscheinen soll. Sie überschreiben damit den Standardtext Video fertig angesehen. Über diese Verknüpfung kann der Betrachter den Player wieder ausblenden.

Codebeispiel:

Legen Sie mit der Eigenschaft startupDelay für die erste Suche beim Laden der Webseite eine Verzögerung fest. Erlaubt sind Werte von 500 (eine halbe Sekunde) bis 2000 (zwei Sekunden). Im Allgemeinen gibt es keinen Grund, dies zu tun. Hier der komplette Beispielcode der Funktion LoadVideoSearch():

Codebeispiel:

Denken Sie daran, dass gerade der Internet Explorer jedes fehlende Komma in den Array-Definitionen gnadenlos bestraft. Mit der GSearch-Methode setOnLoadCallback() führen Sie die Funktion LoadVideoSearch() schließlich aus. Die Syntax dabei lautet

Codebeispiel:

GSearch.setOnLoadCallback
(LoadVideoSearch);

Die Methode stellt sicher, dass dies geschieht, sobald der Browser die Webseite lädt.