Voorbeeld van video: videojukebox

Het externe bestand playlist.xml geeft aan welke video’s moeten worden geladen en in welke volgorde ze moeten worden afgespeeld. Wanneer u het XML-bestand wilt laden, moet u een URLLoader- en een URLRequest-object gebruiken, zoals in het volgende voorbeeld wordt geïllustreerd:

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

Deze code wordt in de constructor van de klasse VideoJukebox geplaatst, zodat het bestand wordt geladen voordat andere codes worden uitgevoerd. Zodra het XML-bestand klaar is met laden, wordt de methode xmlCompleteHandler() aangeroepen, die het externe bestand in een XML-object parseert. Dit wordt in het volgende voorbeeld geïllustreerd:

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

Het XML-object playlist bevat de onbewerkte XML-gegevens van het externe bestand, terwijl videos XML een XMLList-object is dat alleen de videonodes bevat. In het volgende fragment wordt het voorbeeldbestand playlist.xml weergegeven:

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

Ten slotte roept de methode xmlCompleteHandler() de methode main() op, waarmee de verschillende componentinstanties in de weergavelijst worden ingesteld. Bovendien worden de NetConnection- en NetStream-objecten ingesteld die worden gebruikt om de externe FLV-bestanden te laden.

Wanneer u de gebruikersinterface wilt maken, moet u vijf Button-instanties naar de weergavelijst slepen en ze de volgende instantienamen geven: playButton , pauseButton , stopButton , backButton en forwardButton .

Voor elk van deze Button-instanties moet u een handler toewijzen voor de gebeurtenis click , zoals in het volgende fragment wordt geïllustreerd:

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);

De methode buttonClickHandler() gebruikt de instructie switch om te bepalen op welke Button-instantie is geklikt, zoals in de volgende code wordt geïllustreerd:

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; 
    } 
}

Vervolgens voegt u een Slider-instantie aan de weergavelijst toe en geeft u deze de instantienaam volumeSlider . De volgende code stelt de eigenschap liveDragging van de Slider-instantie in op true en definieert een gebeurtenislistener voor de gebeurtenis change van de Slider-instantie:

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);

Voeg een ProgressBar-instantie aan de weergavelijst toe en geef deze de instantienaam positionBar . Stel de eigenschap mode ervan in op manual, zoals in het volgende fragment wordt geïllustreerd:

positionBar.mode = ProgressBarMode.MANUAL;

Voeg ten slotte een Label-instantie aan de weergavelijst toe en geef deze de instantienaam positionLabel . De waarde van deze Label-instantie wordt door de Timer-instantie ingesteld.

Wanneer Flash Player metagegevens van de geladen video’s tegenkomt, wordt de callbackhandler onMetaData() op de eigenschap client van het NetStream-object aangeroepen. De volgende code initialiseert een object en stelt de opgegeven callbackhandler in:

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

De methode metadataHandler() kopieert de gegevens naar de eigenschap meta, die eerder in de code is gedefinieerd. Hierdoor hebt u in de hele toepassing toegang tot de metagegevens van de huidige video. Vervolgens worden de afmetingen van het Video-object op het werkgebied gewijzigd, zodat deze met de geretourneerde afmetingen van de metagegevens overeenkomen. Ten slotte wordt de positionBar-voortgangsbalkinstantie verplaatst en worden de afmetingen ervan gewijzigd, gebaseerd op de afmetingen van de video die momenteel wordt afgespeeld. De volgende code bevat de gehele methode metadataHandler() .

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; 
}

De toepassing gebruikt een NetConnection- en een NetStream-object om elk van de video's dynamisch te laden. De volgende code maakt een NetConnection-object en geeft null door aan de methode connect() . Door null op te geven, maakt Flash Player verbinding met een video op de lokale server, in plaats van verbinding te maken met een server, zoals Flash Media Server.

De volgende code maakt zowel de NetConnection- als de NetStream-instantie, definieert een gebeurtenislistener voor de gebeurtenis netStatus en wijst het client -object aan de eigenschap client toe:

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

De methode netStatusHandler() wordt aangeroepen wanneer de status van de video is gewijzigd. Dat wil zeggen, wanneer een video het afspelen start of stopt of wordt gebufferd, of wanneer een videostream niet kan worden gevonden. De volgende code geeft de gebeurtenis netStatusHandler() weer:

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. 
    } 
}

De vorige code evalueert de eigenschap code van het Info-object en filtert wanneer de code ‘NetStream.Play.Start’, ‘NetStream.Play.StreamNotFound’ of ‘NetStream.Play.Stop’ is. Alle andere codes worden genegeerd. Wanneer de netwerkstream de code start, start de Timer-instantie die de afspeelkop bijwerkt. Wanneer de netwerkstream niet kan worden gevonden of is gestopt, wordt de Timer-instantie gestopt en probeert de toepassing de volgende video in de afspeellijst af te spelen.

Elke keer dat de timer wordt uitgevoerd, werkt de positionBar -voortgangsbalkinstantie de huidige positie bij door de methode setProgress() van de klasse ProgressBar op te roepen en wordt de Label-instantie positionLabel bijgewerkt met de verstreken tijd en de totale tijd van de huidige video.

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. 
    } 
}

U kunt het volume van een dynamisch geladen video regelen door de eigenschap soundTransform op het NetStream-object in te stellen. Met de videojukeboxtoepassing kunt u het volumeniveau wijzigen door de waarde van de Slider-instantie volumeSlider te wijzigen. De volgende code toont hoe u het volumeniveau kunt wijzigen door de waarde van de Slider-component toe te wijzen aan een SoundTransform-object dat op de eigenschap soundTransform op het NetStream-object is ingesteld:

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

De rest van de toepassing bestuurt het afspelen van de video wanneer de video het einde van de videostream heeft bereikt of wanneer de gebruiker naar de vorige of volgende video gaat.

De volgende methode haalt de video-URL op van de XMLList voor de index die momenteel is geselecteerd:

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

De methode playVideo() roept de methode play() op het NetStream-object op om de video te laden die momenteel is geselecteerd:

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

De methode playPreviousVideo() verlaagt de huidige video-index, roept de methode playVideo() op om het nieuwe videobestand te laden en stelt de voortgangsbalk op visible in:

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

De laatste methode, playNextVideo() , verhoogt de video-index en roept de methode playVideo() op. Als de huidige video zich in de afspeellijst bevindt, wordt de methode clear() op het Video-object aangeroepen en wordt de eigenschap visible van de voortgangsbalkinstantie op false ingesteld:

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