xDee

Flash FLV Stream Player – Flash Tutorial

Posted on 17. Mai, 2009 by admin in Flash Tutorials

Es wird wieder einmal Zeit für ein Flash Tutorial. Dieses mal wollen wir uns mit den immer populärer werdenden Flash Stream Playern beschäftigen. Wir werden einen kleinen sehr simpel gehaltenen FLV Player programmieren, der die FLV Datei von einem anderen Server streamt.

Voraussetzungen:

• Umgehen mit den Flash Werkzeugen

Lernziele:

• Verwenden der NetStream Klasse
• Anzeigen von Variablen in Textfeldern

Hier eine Vorschau von dem, was wir erstellen werden:

Ausnahmsweise steht hier einmal der Inhalt und nicht das Design im Vordergrund. Der Player ist sehr einfach aufgebaut. Er lädt ein FLV File von www.mediacollege.com (Copyright by Mediacollege.com) und spielt es dann ab. Dazu kommen ein paar einfache Steuerbuttons und einige Textfelder mit Informationen über das FLV-File.

Als erstes benötigen wir ein neues Video Objekt. Dazu müsst ihr die Bibliothek öffnen [Ctrl+L] oder über Fenster -> Bibliothek. Dann klickt ihr dort rechts in das weisse Feld und ihm Kontextmenü wählt ihr darauf “Neues Video” aus.

In dem Menü gebt ihr nun einen Namen ein (dieser Spielt für die spätere Benutzung keine Rolle) und achtet darauf, dass “Video von Actionscript gesteuert) angewählt ist.

Nun zieht ihr das Objekt von der Biliothek auf die Bühne und gebt ihm den Instanznamen “my_video“. Mit dem “Frei Transformieren” Werkzeug [Q] könnt ihr zusätzlich noch die Grösse ändern.

Nun erstellt ihr folgende 6 Elemente auf der Bühne:

• dynamisches Textfeld mit der Variable “loaded”
• dynamisches Textfeld mit der Variable “fps“
• dynamisches Textfeld mit der Variable “time“
• Play Button mit dem Instanznamen “play_btn“
• Pause Button mit dem Instanznamen “pause_btn“
• Stop Button mit dem Instanznamen “stop_btn“

Schlussendlich kommt noch der Actionscript Code:

Nun die Erklärung dazu Schritt für Schritt:

Mit “var connection = new NetConnection()” erstellen wir eine neues NetConnection Objekt. Dieses soll dann erst einmal eine Verbindung aufbauen mit “connection.connect(null)”. Danach erstellen wir ein Stream Objekt dazu: “var stream = new NetStream(connection)“. Nun weisen wir unserem Video Objekt auf der Bühne den Stream zu : “my_video.attachVideo(stream)”. Schlussendlich bestimmen wir noch vieviel in den Zwischenspeicher geladen werden soll, in diesem Fall sind das 5 Sekunden, das heisst erst wenn 5 Sekunden des Videos geladen sind, fängt Flash an das Video abzuspielen. Bei grossen Videos empfiehlt es sich, hier einen grösseren Wert zu nehmen.

Nun bestimmen wir mit “url = “http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv”” von wo das FLV File geladen werden soll. Jetzt können wir es mit “stream.play(url)” abspielen lassen.

Für die Play/Pause Buttons brauchen wir später noch die Variable “is_paused” die wir jetzt erst einmal auf “false” setzen: ” is_paused = false”.

Den wichtigen Teil haben wir jetzt, das Video wird geladen und abgespielt. Der Benutzer sollte jedoch auch noch einige Informationen über das Video erhalten und es pausieren können.

Die Informationen müssen wir während des Abspielens auslesen darum rufen wir sie auch in einer “onEnterFrame” Prozedur ab.

“kbTotal = Math.round(stream.bytesTotal * 0.0009765625)” liest aus wieviele Bytes das Video total umfasst. Wir multiplizieren es mit 0.0009765625 damit wir aus den Bytes, Kilobytes erhalten. Schlussendlich runden wir es mit “Math.round()” noch auf eine Ganzzahl.

Genau gleich gehen wir mit  ”kbLoaded = Math.round(stream.bytesLoaded * 0.0009765625)” vor, nur dass wir hier die Anzahl der geladenen Kilobytes bestimmen.

Jetzt weisen wir der Variable “loaded” die vorher ausgelesenen Werte zu: “loaded = kbLoaded + ” KB of ” + kbTotal + ” KB”“.
Zur Erinnerung: Die Variable “loaded” wir in einem Textfeld ausgegeben!

Nun lesen wir mit  ”fps = Math.round(stream.currentFps) + ” FPS”" die Anzahl der Frames pro Sekunde aus. Wieder wird der Wert auf eine Ganzzahl gerundet. Auch die Variable “fps” wir in einem unserer Textfelder ausgegeben.

Schlussendlich wollen wir noch wissen, wieviele Sekunden schon abgespielt wurden, dazu lesen wir mit folgendem Code die Zeit aus und weisen sie der Variable “time” zu: “time = Math.round(stream.time) + ” sec”“.

Nun kommen noch die Buttons. Wichtig dabei sind eigentlich nur folgende drei Befehle:

• stream.play(url) – lädt das Video nochmal und spielt es von vorne ab.
• stream.pause() – pausiert das Video b.z.w spielt es wieder ab.
• stream.close() - schliesst den Stream, sodass das Video anschliessen wieder neu geladen werden muss.

Wichtig ist auch noch, dass beim Play Button, je nachdem welchen Wert die Variable “is_paused” hat, entweder das Video neu lädt oder wieder abspielt.

Nun sind wir auch schon fertig mit unserem simplen FLV Player. Experimentiert ein bisschen damit herum, wie wäre es zum Beispiel wenn der User selbst eine URL eingeben könnte und dann würde der FLV Player das Video laden?

Fragen und Kritik einfach in die Comments.
MFG

Michael

Tags: Flash Tutorial, FLV Player, netConnection, netStream, setBufferTime, stream, Video Player