In den ersten beiden Artikeln zur YouTube-API ging es um den Player im allseits bekannten YouTube-Design. Mit der YouTube-API gibt nun auch die Möglichkeit, Videos von YouTube in einen eigenen Player zu gießen. Dazu kommt der so genannten Chromeless Player zum Einsatz, also ein Player ohne Bedienelemente.
Laden des YouTube Chromeless Player
Beim Chromeless-Player funktioniert der Videoaufruf an einer Stelle etwas anders als bei den zuvor gezeigten Beispielen. Man benötigt im Vergleich zum normalen YouTube-Player zwei Schritte. Zuerst lädt man die Player-SWF-Datei ohne Video-ID. Die Adresse lautet http://www.youtube.com/apiplayer
.
Im zweiten Schritt, sobald das SWF vollständig da ist, ruft man die Video-ID auf. Dazu gibt es zwei unterschiedliche Funktionen:
- Die Funktion
loadVideoById("ABCD12345")
spielt ein Video direkt ab. cueVideoById("ABCD12345")
sorgt für das typische Vorschaubild mit dem Playbutton in der Mitte.
Das Ergebnis ist ein YouTube-Video ohne Steuerungselemente:
-
// neuer MovieClip für den YouTube-Player
-
"myYouTubePlayer", 1);
-
-
// event listener erstellen
-
// neues Interval
-
// sofort damit ...
-
// .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
-
// wenn Player geladen ...
-
// wichtig beim Chromeless-Player
-
// loadVideoById (laden und abspielen)
-
// bzw. cueVideoById (vorschaubild)
-
"QOJdIJzIqzc");
-
-
// Größe setzen
-
//myYouTubePlayer.setSize (400, 300);
-
-
// Preloader ausblenden
-
// Preloader ausblenden
-
"Player loaded ...";
-
-
-
// Überprüfungsinterval wieder löschen
-
// event listener, wenn sich der videostatus (play, pause, etc.) ändert
-
"onStateChange"// event listener für fehler
-
"onError"// MovieClipsLoader zum Laden des Players
-
// Event Listener hinzufügen
-
// Ladevorgang starten (nach ../v/ die Video-ID eintragen)
-
"http://www.youtube.com/apiplayer"// positionieren
-
// Status des Players (= Zahl)
-
"Unstarted ...""Ended ...""Playing ...""Paused ...";
-
// Symbol und Funktionalität umstellen
-
"Buffering ...""Video cued ...""Fehler aufgetreten "
Buttons für den Chromeless Player
Alle gängige Funktionen wie play (playVideo
), pause (pauseVideo
), stop (stopVideo
), spulen (seekTo
) oder die Lautstärke (setVolume
) sind in der YouTube API enthalten. Im nachfolgenden Beispiel werden zwei Buttons erstellt: ein Play-Pause-Button und Mute-Button (Ton stummschalten).
Ein Hinweis: Beim Entwickeln sollte man sich nicht irritieren lassen, wenn der Ton fehlt. Der Player merkt sich den Stand vom letzten Aufruf, d.h. wenn man den Ton z.B. stummschaltet, steht dieser beim nächsten Aufruf bereits auf lautlos. Deshalb muss man beim Initialisieren des Players immer den Status abfragen ( isMuted()
) und im Mutebutton das passende Symbol einblenden.
Hier das Beispiel:
-
// neuer MovieClip für den YouTube-Player
-
"myYouTubePlayer", 1);
-
-
// event listener erstellen
-
// neues Interval
-
// sofort damit ...
-
// .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
-
// wenn Player geladen ...
-
// wichtig beim Chromeless-Player
-
// loadVideoById (laden und abspielen)
-
// bzw. cueVideoById (vorschaubild)
-
"FgQwopwiqvU");
-
-
// Größe setzen
-
// Preloader ausblenden
-
// Preloader ausblenden
-
"Player loaded ...";
-
-
// Falls player gemutet, button anpassen
-
// Überprüfungsinterval wieder löschen
-
// event listener, wenn sich der videostatus (play, pause, etc.) ändert
-
"onStateChange"// event listener für fehler
-
"onError"// MovieClipsLoader zum Laden des Players
-
// Event Listener hinzufügen
-
// Ladevorgang starten (nach ../v/ die Video-ID eintragen)
-
"http://www.youtube.com/apiplayer"// positionieren
-
// Status des Players (= Zahl)
-
"Unstarted ...""Ended ...""Playing ...";
-
// Symbol und Funktionalität umstellen
-
"Paused ...";
-
// Symbol und Funktionalität umstellen
-
"Buffering ...""Video cued ...""Fehler aufgetreten "// ::::::::::: Start and Pause Button ::::::::::
-
-
// init with start function
-
// ::::::::::: Mute Button ::::::::::
-
// wenn nicht gemutet
-
// Video muten
-
// Symbol umstellen
-
// wenn gemutet
-
// Video unmuten
-
// Symbol umstellen
-
Weitere Artikel zur YouTube-API unter dem Stichwort YouTube API.
Link: YouTube JavaScript Player API Reference (enthält die gleichen Befehle wie die Flash API)
Download: Beispiel 4 (.fla)
Download: Beispiel 5 (.fla)
4 Kommentare zum Beitrag "YouTube API, Teil 3: Chromeless Player"
Und wieder einmal stelle ich fest: Ganz großes Kino hier! Danke, Flo!
Bitteschön :-)
Hi,
ich habe auch versucht über Youtube-API was zu machen. Es auch geklappt, hat aber einen kleinen hacken. Da Youtube in der Türkei leider gesperrt ist, kann das apiplayer garnicht geladen werden weil es von Youtube.com geladen werden muss.. könnt ich vielleicht mir helfen wie ich auf http://www.youtube.com/apiplayer sonst zugreifen könnte?
Ich danke euch im Voraus.
Hi Qonyali,
hatte ich gar nicht gewusst, dass YouTube in der Türkei gesperrt ist.
Da fällt mir leider keine Lösung ein.
Auch die deutsche YouTube-Seite wird auf youtube.com umgeleitet, ohne Zugriff darauf geht wohl nichts.
Schreibe einen Kommentar