Mit Youtube
Chromeless-Player in die eigene Website einbauen
1. Code-Gerüst für Ihren Player
Auf http://code.google.com/intl/de-DE/apis/youtube/chromeless_example_1.html stellt Google eine Demoseite für die Youtube-API bereit. Der Quelltext der Seite enthält alle Scripts und Elemente für die Erzeugung eines eigenen „Chromeless Players“. Auf diese Weise erhalten Sie einen Videoplayer ohne jeglichen Rahmen oder grafische Elemente, den Sie ganz nach Belieben anpassen können.
Auf http://code.google.com/intl/de-DE/apis/youtube/chromeless_example_1.html stellt Google eine Demoseite für die Youtube-API bereit. Der Quelltext der Seite enthält alle Scripts und Elemente für die Erzeugung eines eigenen „Chromeless Players“. Auf diese Weise erhalten Sie einen Videoplayer ohne jeglichen Rahmen oder grafische Elemente, den Sie ganz nach Belieben anpassen können.
2. Elemente für die Steuerung
Öffnen Sie den Quelltext der Seite, und kopieren Sie aus dem „<head>“-Bereich die zwei „<script>“-Elemente vollständig in Ihre Seite an die gleiche Stelle. Das erste Script-Element sorgt für das Nachladen einer Javascript-Datei. Im zweiten Element sind sämtliche Funktionen definiert, die Sie für Ihre Player-Steuerung brauchen.
Öffnen Sie den Quelltext der Seite, und kopieren Sie aus dem „<head>“-Bereich die zwei „<script>“-Elemente vollständig in Ihre Seite an die gleiche Stelle. Das erste Script-Element sorgt für das Nachladen einer Javascript-Datei. Im zweiten Element sind sämtliche Funktionen definiert, die Sie für Ihre Player-Steuerung brauchen.
3. Player laden
Ebenfalls in Ihr HTML-Dokument kopieren Sie das „“-Element mit der Kennung „ytapiplayer“und das folgende „<script>“-Element. An dieser Stelle sehen Sie später das Video. Der Text im „
“-Container ist nur für den Fall vorgesehen, dass der Browser nicht über ein Flash-Plug-in oder Javascript-Unterstützung verfügt. Das Script lädt den Player und gibt seine Größe hier mit den Parametern „400“ für die Breite und„300“ für die Höhe an.
4. Design nach Wunsch
Die zwei zusätzlichen Zeilen Code
und eine Hintergrundgrafik sorgen in diesem Beispiel für ein eigenes Player-Design. Die „onclick“-Anweisung ruft die im Script definierten Funktionen auf. Statt „play()“ benötigen Sie hier „load-NewVideo()“, da noch kein geladenes Video vorliegt. Den ersten Parameter in diesem Funktionsaufruf „ XUNRZODWyps“ ersetzen Sie durch die ID Ihres Videos, die Sie am Ende der URL beim Abspielen Ihres Videos in Youtube sehen.
Die zwei zusätzlichen Zeilen Code
und eine Hintergrundgrafik sorgen in diesem Beispiel für ein eigenes Player-Design. Die „onclick“-Anweisung ruft die im Script definierten Funktionen auf. Statt „play()“ benötigen Sie hier „load-NewVideo()“, da noch kein geladenes Video vorliegt. Den ersten Parameter in diesem Funktionsaufruf „ XUNRZODWyps“ ersetzen Sie durch die ID Ihres Videos, die Sie am Ende der URL beim Abspielen Ihres Videos in Youtube sehen.
Vorherige Seite
Seite 5 von 5
Nächste Seite
