YouTube API, Teil 4: Embed Code, Video-URL und Zeitanzeige

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)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert