RSS Flash FLV Video Player mit AS3 mit NetConnection

verfasst 24.04.2009 von MediaCix | kurze URL: /t659 | Kommentar schreiben

Flash FLV Video Player mit AS3 mit NetConnection

Ob Youtube, MyVideo oder Clipfish, überall werden FLV Video Player eingesetzt und sind immer nach selben Grundprinzip aufgebaut. Heute eine kleine Anleitung wie man einen einfachen FLV Video Player mit ActionScript3 (AS3) erstellt. Die Anleitung ist mit Absicht für AS3 geschrieben, da ich denke, dass irgendwann AS2 genauso veraltet ist wie jetzt PHP4. 3 Button, eine FLVPlayback-Komponente und 2 Textfelder bilden die Grundform von diesem Beispiel. Der Rest wird mit AS3 erstellt.

FLV-Player basieren fast immer auf dem selben Prinzip. Eine FLV-Komponente, die NetConnection-Klasse und die NetStream-Klasse. Bevor wir zum AS-Teil kommen bereiten wir erstmal die Bühne vor. Als erstes fügen wir die Komponente (Strg+F7) FLVPlayback in die Bühne ein und vergeben den Intanznamen ?myPlayer?. Dann erstellen wir 3 Button für Play, Stop und Pause. Vergeben den Intanzname für Play-Button ?btn_play?, für Stop-Button ?btn_stop? und für Pause-Button ?btn_pause?. Weiterhin 2 Textfelder die vorerst als Kontrolle dienen. Ein Textfeld mit Intanzname ?info_time? und ein Textfeld ?info_dur?.

Ist alle auf der Bühne vorbereitet, müssen jetzt alle notwendigen Klassen geladen werden.

» Flash ActionScript
// Befehle zu einem Remote-Anwendungsserver senden
import flash.net.NetConnection;
// Streaming-Verbindung zwischen Flash Player und einem Server 
import flash.net.NetStream;
// Schnittstelle für einem Zeitgeber 
import flash.utils.Timer;


Der Zeitgeber ist prinzipiell nicht notwendig. Ich benutze diesen um die aktuelle Position im Video mit der End-Position zu überwachen. Später kann aus diesen Daten ein Lade-Balken erstellt werden. Nachdem nun alle benötigten KLassen geladen wurde, müssen Varibablen definiert werden.

» Flash ActionScript
// URL zur FLV Datei
var video_url:String = 'meine_flv.flv';
// für einen Video-Status
var video_stat:String = 'stop';

// NetConnection definieren
var nc:NetConnection = new NetConnection();
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nc.connect(null);

// NetStream und Video definieren
var ns:NetStream = new NetStream(nc);
var vid:Video = new Video();

// Variablen für Zeitgeber
var myTimer:Timer;
var cur_end:Number;
var cur_now:Number;


Für NetStatusEvent muss eine Funktion erstellt werden. Diese ist notwenig wenn ein Status gemeldet wird. Es kann ja sein, dass die FLV-Datei gar nicht erreichbar ist :)

» Flash ActionScript
function netStatusHandler(event:NetStatusEvent):void {
 switch (event.info.code) {
        case "NetStream.Play.StreamNotFound":
         trace("Stream not found: " + video_url);
            break;
 }
}


Der FLV-Komponente können wir jetzt noch weitere Werte zuweisen und muss mit NetStream verbunden (attachNetStream) werden.

» Flash ActionScript
vid.x = 110;
vid.y = 80;
vid.width = 320;
vid.height = 240;
vid.attachNetStream(ns);


Ganz nützlich ist es, wenn man eingebettete beschreibende Informationen zu einer FLV bekommt. Damit man diese onMetaData auslesen kann, müssen wir zusätzlich noch ein Object erstellen. Mit addChild wird dieser DisplayObjectContainer-Instanz eine untergeordnete DisplayObject-Instanz hinzu gefügt ... das Video ist dann sichtbar.

» Flash ActionScript
var customClient:Object = new Object();
customClient.onMetaData = onMetaData;
ns.client = customClient;
addChild(vid);


Mit Hilfe von onMetaData ermitteln wir die End-Spielzeit (duration) vom FLV-Video:

» Flash ActionScript
function onMetaData(info:Object):void {
 cur_end = Math.floor(info.duration);
 info_dur.text = cur_end.toString();
 video_stat = 'ok';
}


Jetzt weisen wir den 3 Button die Funktionen für Play, Stop und Pause mittels Ereignis-Listener zu:

» Flash ActionScript
btn_play.addEventListener(MouseEvent.CLICK,video_play);
function video_play(event:MouseEvent) {
 ns.play(video_url);
 timer_start();
}

btn_pause.addEventListener(MouseEvent.CLICK,video_pause);
function video_pause(event:MouseEvent) {
 ns.togglePause();
}

btn_stop.addEventListener(MouseEvent.CLICK,video_stop);
function video_stop(event:MouseEvent) {
 ns.close();
 timer_stop();
}


Mittels ns.togglePause() kann man die Wiedergabe über dieselbe Schaltfläche anhalten und fortsetzen lassen. Zum Schluss folgt ein Zeitgeber, der die aktuelle Position beim abspielen ermittelt. Daraus könnte man dann ganz leicht Lade-Balken oder anderen Aktionen steuern.

» Flash ActionScript
function timer_start() {
 myTimer = new Timer (500,0);
 myTimer.addEventListener("timer", timerHandler);
 myTimer.start();
}

function timer_stop() {
 myTimer.stop();
}

function timerHandler(event:TimerEvent) {
 if ( video_stat == 'ok' ) {
  cur_now = Math.ceil(ns.time);
  info_time.text = cur_now.toString();
  if ( cur_now >= cur_end ) {
   myTimer.stop();
   info_time.text = 'stop';
  }
 }
}


Für einen ganz, ganz, ganz einfachen FLV-Player ist das schon alles. Weitere Funktionen könnten Lade-Balken, Fullscreen-Modus, Vor- und Zurückspulen, Lautstärke-Reglung etc... sein. Und wenn alles soweit funktioniert, dann sollte es wie folgt aussehen:

neuen Kommentar schreiben

Ich möchte automatisch eine E-Mail bei neuen Kommentaren erhalten.



Themen mit ähnlichen Inhalten


Tags zum Beitrag

flv-player     video-player     flvplayback