Auch im vierten Teil zur YouTube API gibt es wieder zwei Beispiele. Das eine zeigt, wie man den Embed-Code und die Video-URL ausliest. Das zweite liefert eine einfache Lösung, wie man eine Zeitanzeige erstellt.
Die Quellcodes (.fla) gibt es am Ende des Artikels zum Download
YouTube API: Embed Code und Video-URL
Die Funktion getVideoEmbedCode() liefert einen String zurück, der den HTML-Code zum Einbetten in eine Website enthält. Den Direkt-Link zur YouTube-Seite erhält man mit der Methode getVideoUrl(). Hier das passende Beispiel:
[ad]
[kml_flashembed movie=“/wp-content/uploads/2008/07/YouTube06.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 (320, 240);
// 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);
// Embed Code darstellen
myEmbedCode.text = myYouTubePlayer.getVideoEmbedCode();
// Video URL darstellen
myVideoURL.htmlText = myYouTubePlayer.getVideoUrl();
}
}
// 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]
YouTube API: Zeitanzeige
Für eine Zeitanzeige nutzt man die Funktion getCurrentTime(). Sie liefert die aktuelle Abspielposition zurück, allerdings nur in vollen Sekunden (z.B. „150“ für 2min30sec). Man kann jedoch die TimeCode-Klasse von Lee Brimelow nutzen, die ich etwas modifiziert habe. Diese rechnet die kompletten Sekunden in das Format mm:ss (z.B. 02:30) um. Eine AS3-Variante von mir gibt es übrigens hier: ActionScript 3: TimeCode Klasse für Video-Zeitanzeige).
Die TimeCode-Klasse kann man ebenfalls auf getDuration() anwenden, wodurch man die Gesamtzeit des Videos erhält.
[ad]
[kml_flashembed movie=“/wp-content/uploads/2008/07/YouTube07.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 …“;
// 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) {
loadInterval = setInterval(checkTime, 250);
// 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);
}
}
// ::::::::::: Time Button ::::::::::
// TimeCode Variable
var tc:TimeCode;
tc = new TimeCode();
function checkTime():Void {
// String zum Abspeichern
var timeString:String;
// aktuelle Zeit / Gesamtzeit
timeString = tc.getTimeCode (myYouTubePlayer.getCurrentTime() );
timeString += “ / „;
timeString += tc.getTimeCode (myYouTubePlayer.getDuration() );
myTimeDisplay.myTextField.text = timeString;
}
[/as]
Die anderen Artikel zur YouTube-API sind unter dem Tag YouTube API abgelegt.
Download: Beispiel 6 (.fla)
Download: Beispiel 7 (.fla)