Video-Beispiel: Video Jukebox

Die externe Datei „playlist.xml“ gibt die zu ladenden Videos und die Reihenfolge an, in der sie wiedergegeben werden. Zum Laden der XML-Datei benötigen Sie ein URLLoader-Objekt und ein URLRequest-Objekt. Dies wird im folgenden Code gezeigt:

uldr = new URLLoader(); 
uldr.addEventListener(Event.COMPLETE, xmlCompleteHandler); 
uldr.load(new URLRequest(PLAYLIST_XML_URL));

Dieser Code wird im Konstruktor der VideoJukebox-Klasse eingefügt, sodass die Datei geladen wird, noch bevor anderer Code ausgeführt wird. Sobald die XML-Datei vollständig geladen ist, wird die xmlCompleteHandler() -Methode aufgerufen, die die externe Datei in ein XML-Objekt einliest, wie im folgenden Code dargestellt:

private function xmlCompleteHandler(event:Event):void 
{ 
    playlist = XML(event.target.data); 
    videosXML = playlist.video; 
    main(); 
}

Das playlist -XML-Objekt enthält den unformatierten XML-Code aus der externen Datei, während videosXML ein XMLList-Objekt ist, das lediglich die Videoknoten enthält. Ein Beispiel für eine „playlist.xml“-Datei wird im folgenden Codeausschnitt gezeigt:

<videos> 
    <video url="video/caption_video.flv" /> 
    <video url="video/cuepoints.flv" /> 
    <video url="video/water.flv" /> 
</videos>

Schließlich ruft die xmlCompleteHandler() -Methode die main() -Methode auf, mit der die verschiedenen Komponenteninstanzen in der Anzeigeliste sowie die NetConnection- und NetStream-Objekte festgelegt werden, die zum Laden der externen FLV-Dateien verwendet werden.

Zum Erstellen der Benutzeroberfläche müssen Sie fünf Button-Instanzen in die Anzeigeliste ziehen und ihnen die folgenden Instanznamen zuweisen: playButton , pauseButton , stopButton , backButton und forwardButton .

Für jede dieser Button-Instanzen müssen Sie eine Prozedur für das click -Ereignis zuweisen, wie im folgenden Codeausschnitt dargestellt:

playButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
pauseButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
stopButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
backButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
forwardButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);

Die buttonClickHandler() -Methode stellt mit einer switch-Anweisung fest, auf welche Schaltflächeninstanz geklickt wurde. Dies wird im folgenden Code gezeigt:

private function buttonClickHandler(event:MouseEvent):void 
{ 
    switch (event.currentTarget) 
    { 
        case playButton: 
            ns.resume(); 
            break; 
        case pauseButton: 
            ns.togglePause(); 
            break; 
        case stopButton: 
            ns.pause(); 
            ns.seek(0); 
            break; 
        case backButton: 
            playPreviousVideo(); 
            break; 
        case forwardButton: 
            playNextVideo(); 
            break; 
    } 
}

Anschließend fügen Sie der Anzeigeliste eine Slider-Instanz hinzu und weisen ihr den Instanznamen volumeSlider zu. Mit dem folgenden Code wird die liveDragging -Eigenschaft der Slider-Instanz auf true gesetzt und ein Ereignis-Listener für das change -Ereignis der Slider-Instanz definiert:

volumeSlider.value = volumeTransform.volume; 
volumeSlider.minimum = 0; 
volumeSlider.maximum = 1; 
volumeSlider.snapInterval = 0.1; 
volumeSlider.tickInterval = volumeSlider.snapInterval; 
volumeSlider.liveDragging = true; 
volumeSlider.addEventListener(SliderEvent.CHANGE, volumeChangeHandler);

Fügen Sie der Anzeigeliste eine ProgressBar-Instanz hinzu und weisen Sie ihr den Instanznamen positionBar zu. Setzen Sie die zugehörige mode -Eigenschaft auf manual, wie im folgenden Code dargestellt:

positionBar.mode = ProgressBarMode.MANUAL;

Fügen Sie schließlich der Anzeigeliste eine Label-Instanz hinzu, und weisen Sie ihr den Instanznamen positionLabel zu. Der Wert dieser Label-Instanz wird mit der Timer-Instanz festgelegt.

Wenn in Flash Player Metadaten für die einzelnen geladenen Videos gefunden werden, wird die Rückrufprozedur onMetaData() für die client -Eigenschaft des NetStream-Objekts aufgerufen. Mit dem folgenden Code wird ein Objekt initialisiert und die angegebene Rückrufprozedur eingerichtet:

client = new Object(); 
client.onMetaData = metadataHandler;

Die metadataHandler() -Methode kopiert ihre Daten in die meta-Eigenschaft, die bereits im Code definiert wurde. Auf diese Weise können Sie über die gesamte Anwendung auf die Metadaten des aktuellen Videos zugreifen. Als Nächstes wird das Video-Objekt auf der Bühne skaliert, sodass es den Abmessungen entspricht, die von den Metadaten zurückgegeben werden. Abschließend wird die Fortschrittleisten-Instanz positionBar basierend auf der Größe des aktuellen wiedergegebenen Videos verschoben und in der Größe geändert. Der folgende Code enthält die vollständige metadataHandler() -Methode:

private function metadataHandler(metadataObj:Object):void 
{ 
    meta = metadataObj; 
    vid.width = meta.width; 
    vid.height = meta.height; 
    positionBar.move(vid.x, vid.y + vid.height); 
    positionBar.width = vid.width; 
}

Zum dynamischen Laden von Video-Dateien verwendet die Anwendung ein NetConnection- und ein NetStream-Objekt. Mit dem folgenden Code wird ein NetConnection-Objekt erstellt und der Wert null an die connect() -Methode übergeben. Durch Angabe von null wird in Flash Player eine Verbindung mit einem Video auf dem lokalen Server anstelle einer Verbindung mit einem Remote-Server wie Flash Media Server hergestellt.

Mit dem folgenden Code wird die NetConnection- und die NetStream-Instanz erstellt, ein Ereignis-Listener für das netStatus -Ereignis definiert und der client -Eigenschaft das client -Objekt zugewiesen:

nc = new NetConnection(); 
nc.connect(null); 
 
ns = new NetStream(nc); 
ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); 
ns.client = client;

Die netStatusHandler() -Methode wird immer aufgerufen, wenn sich der Videostatus ändert. Hierzu gehören das Starten oder Stoppen der Videowiedergabe, das Puffern von Videodaten oder wenn ein Video-Stream nicht gefunden werden kann. Im folgenden Code ist die netStatusHandler() -Ereignisprozedur aufgeführt:

private function netStatusHandler(event:NetStatusEvent):void 
{ 
    try 
    { 
        switch (event.info.code) 
        { 
            case "NetStream.Play.Start": 
                t.start(); 
                break; 
            case "NetStream.Play.StreamNotFound": 
            case "NetStream.Play.Stop": 
                t.stop(); 
                playNextVideo(); 
                break; 
        } 
    }  
    catch (error:TypeError)  
    { 
        // Ignore any errors. 
    } 
}

Im vorangegangenen Code wird die code-Eigenschaft des info-Objekts ausgewertet und ermittelt, ob der Code „NetStream.Play.Start“, „NetStream.Play.StreamNotFound“ oder „NetStream.Play.Stop“ enthält. Alle weiteren Codes werden ignoriert. Beim Starten des Net-Streams startet der Code die Timer-Instanz, die den Abspielkopf aktualisiert. Kann der Net-Stream nicht gefunden werden oder ist er angehalten, wird die Timer-Instanz gestoppt und die Anwendung versucht, das nächste Video in der Playliste wiederzugeben.

Jedes Mal, wenn der Timer ausgeführt wird, aktualisiert die Fortschrittleisten-Instanz positionBar die aktuelle Position, indem die setProgress() -Methode der ProgressBar-Klasse aufgerufen wird. Die Label-Instanz positionLabel wird mit der verstrichenen Zeit und der Gesamtlaufzeit des aktuellen Videos aktualisiert.

private function timerHandler(event:TimerEvent):void 
{ 
    try 
    { 
        positionBar.setProgress(ns.time, meta.duration); 
        positionLabel.text = ns.time.toFixed(1) + " of " meta.duration.toFixed(1) + " seconds"; 
    }  
    catch (error:Error) 
    { 
        // Ignore this error. 
    } 
}

Sie können die Lautstärke eines dynamisch geladenen Videos steuern, indem Sie die soundTransform -Eigenschaft des NetStream-Objekts festlegen. Mit der Anwendung „Video Jukebox“ können Sie die Lautstärke einstellen, indem Sie den Wert der Slider-Instanz volumeSlider ändern. Im folgenden Code wird gezeigt, wie Sie die Lautstärke ändern können, indem Sie den Wert der Slider-Komponente einem SoundTransform-Objekt zuweisen, das als soundTransform -Eigenschaft des NetStream-Objekts festgelegt ist:

private function volumeChangeHandler(event:SliderEvent):void 
{ 
    volumeTransform.volume = event.value; 
    ns.soundTransform = volumeTransform; 
}

Der Rest der Anwendung steuert die Videowiedergabe, wenn das Video das Ende des Video-Streams erreicht oder der Benutzer zum vorherigen oder nächsten Video springt.

Mit der folgenden Methode wird die Video-URL vom XMLList-Objekt für die aktuell ausgewählte Indexposition abgerufen:

private function getVideo():String 
{ 
    return videosXML[idx].@url; 
}

Die playVideo() -Methode ruft die play() -Methode des NetStream-Objekts auf, um das derzeit ausgewählte Video zu laden:

private function playVideo():void 
{ 
    var url:String = getVideo(); 
    ns.play(url); 
}

Die playPreviousVideo() -Methode verringert den aktuellen Videoindex, ruft die playVideo() -Methode auf, um eine neue Videodatei zu laden, und zeigt die Fortschrittleiste an:

private function playPreviousVideo():void 
{ 
    if (idx > 0) 
    { 
        idx--; 
        playVideo(); 
        positionBar.visible = true; 
    } 
}

Die letzte Methode playNextVideo() erhöht den Videoindex und ruft die playVideo() -Methode auf. Wenn das aktuelle Video das letzte Video in der Wiedergabeliste ist, wird die clear() -Methode für das Video-Objekt aufgerufen und die visible -Eigenschaft der Fortschrittleisten-Instanz auf false gesetzt:

private function playNextVideo():void 
{ 
    if (idx < (videosXML.length() - 1)) 
    { 
        idx++; 
        playVideo(); 
        positionBar.visible = true; 
    } 
    else 
    { 
        idx++; 
        vid.clear(); 
        positionBar.visible = false; 
    } 
}