YouTube API, Teil 3: Chromeless Player

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:

[ad]

[kml_flashembed movie=“/wp-content/uploads/2008/07/YouTube04.swf“ width=“500″ height=“450″ /]

[as]
// neuer MovieClip für den YouTube-Player
myYouTubePlayer = createEmptyMovieClip(„myYouTubePlayer“, 1);

// event listener erstellen
myLoaderListener = {};

// neues Interval
var loadInterval:Number;

// sofort damit …
myLoaderListener.onLoadInit = function() {
// .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
loadInterval = setInterval(checkPlayerLoaded, 250);
}

function checkPlayerLoaded():Void {

// wenn Player geladen …
if ( myYouTubePlayer.isPlayerLoaded() ) {

// wichtig beim Chromeless-Player
// loadVideoById (laden und abspielen)
// bzw. cueVideoById (vorschaubild)
myYouTubePlayer.cueVideoById(„QOJdIJzIqzc“);

// Größe setzen
//myYouTubePlayer.setSize (400, 300);

// Preloader ausblenden
myProgressIndicator._visible = false;

// Preloader ausblenden
myStatusTxt.text = „Player loaded …“;

// Überprüfungsinterval wieder löschen
clearInterval(loadInterval);

// event listener, wenn sich der videostatus (play, pause, etc.) ändert
myYouTubePlayer.addEventListener(„onStateChange“, onPlayerStateChange);

// event listener für fehler
myYouTubePlayer.addEventListener(„onError“, onPlayerError);

}
}

// MovieClipsLoader zum Laden des Players
myLoader = new MovieClipLoader();

// Event Listener hinzufügen
myLoader.addListener(myLoaderListener);

// Ladevorgang starten (nach ../v/ die Video-ID eintragen)
myLoader.loadClip(„http://www.youtube.com/apiplayer“, myYouTubePlayer);

// positionieren
myYouTubePlayer._x = 10;
myYouTubePlayer._y = 40;

function onPlayerStateChange(newState:Number) {

// Status des Players (= Zahl)
switch (newState) {

case -1: myStatusTxt.text = „Unstarted …“;
break;

case 0: myStatusTxt.text = „Ended …“;
break;

case 1: myStatusTxt.text = „Playing …“;

case 2: myStatusTxt.text = „Paused …“;
// Symbol und Funktionalität umstellen
break;

case 3: myStatusTxt.text = „Buffering …“;
break;

case 5: myStatusTxt.text = „Video cued …“;
break;

}

}

function onPlayerError(errorCode:Number) {
trace(„Fehler aufgetreten „+ errorCode);
}
[/as]

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:

[kml_flashembed movie=“/wp-content/uploads/2008/07/YouTube05.swf“ width=“500″ height=“450″ /]

[ad]

[as]
// neuer MovieClip für den YouTube-Player
myYouTubePlayer = createEmptyMovieClip(„myYouTubePlayer“, 1);

// event listener erstellen
myLoaderListener = {};

// neues Interval
var loadInterval:Number;

// sofort damit …
myLoaderListener.onLoadInit = function() {
// .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
loadInterval = setInterval(checkPlayerLoaded, 250);
}

function checkPlayerLoaded():Void {

// wenn Player geladen …
if ( myYouTubePlayer.isPlayerLoaded() ) {

// wichtig beim Chromeless-Player
// loadVideoById (laden und abspielen)
// bzw. cueVideoById (vorschaubild)
myYouTubePlayer.cueVideoById(„FgQwopwiqvU“);

// Größe setzen
myYouTubePlayer.setSize (400, 300);

// Preloader ausblenden
myProgressIndicator._visible = false;

// Preloader ausblenden
myStatusTxt.text = „Player loaded …“;

// Falls player gemutet, button anpassen
if (myYouTubePlayer.isMuted() == true) {
myMuteButton.mySpeaker.gotoAndStop(2);
}

// Überprüfungsinterval wieder löschen
clearInterval(loadInterval);

// event listener, wenn sich der videostatus (play, pause, etc.) ändert
myYouTubePlayer.addEventListener(„onStateChange“, onPlayerStateChange);

// event listener für fehler
myYouTubePlayer.addEventListener(„onError“, onPlayerError);

}
}

// MovieClipsLoader zum Laden des Players
myLoader = new MovieClipLoader();

// Event Listener hinzufügen
myLoader.addListener(myLoaderListener);

// Ladevorgang starten (nach ../v/ die Video-ID eintragen)
myLoader.loadClip(„http://www.youtube.com/apiplayer“, myYouTubePlayer);

// positionieren
myYouTubePlayer._x = 10;
myYouTubePlayer._y = 40;

function onPlayerStateChange(newState:Number) {

// Status des Players (= Zahl)
switch (newState) {

case -1: myStatusTxt.text = „Unstarted …“;
break;

case 0: myStatusTxt.text = „Ended …“;
break;

case 1: myStatusTxt.text = „Playing …“;
// Symbol und Funktionalität umstellen
myPlayButton.gotoAndStop(2);
myPlayButton.onRelease = pauseVid;
break;

case 2: myStatusTxt.text = „Paused …“;
// Symbol und Funktionalität umstellen
myPlayButton.gotoAndPlay(1);
myPlayButton.onRelease = playVid;
break;

case 3: myStatusTxt.text = „Buffering …“;
break;

case 5: myStatusTxt.text = „Video cued …“;
break;

}

}

function onPlayerError(errorCode:Number) {
trace(„Fehler aufgetreten „+ errorCode);
}

// ::::::::::: Start and Pause Button ::::::::::

// init with start function
myPlayButton.onRelease = playVid;

function playVid():Void {
myYouTubePlayer.playVideo();
}

function pauseVid():Void {
myYouTubePlayer.pauseVideo();
}

// ::::::::::: Mute Button ::::::::::

myMuteButton.onRelease = function():Void {

// wenn nicht gemutet
if (myYouTubePlayer.isMuted() == false) {

// Video muten
myYouTubePlayer.mute();

// Symbol umstellen
myMuteButton.mySpeaker.gotoAndStop(2);
}

// wenn gemutet
else {
// Video unmuten
myYouTubePlayer.unMute();

// Symbol umstellen
myMuteButton.mySpeaker.gotoAndStop(1);
}
}

[/as]

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)