FLEX FLV Video izleme

Buradaki açıklamalar http://blog.flexexamples.com/2007/08/02/scrubbing-an-flv-using-the-videodisplay-control-and-a-slider/ adresindedir.

FLV ve VideoDisplay kontrolları, kayarlar

Video görüntü kontrolunda playback zamanların kalıplanması DateFormatter sınıf/biçimiyle gerçekleşir. HSider kontrollarla ve Zoom ektileriyle video gösterimi gerçekleşir.

Burada HSlider kontrol edilir ve kullanıcıların kayarın üzerinde tıklama yapmaları önlenir. (allowTrackClick özelliği bu amaçla kullanılır. liveDragging özelliği "false" olunca her zaman kayarın göstergesi değiştiğinde gereksiz arama yapılmasını engeller).

Video sürekli başa alınırken autoRewind özelliği kullanılır ve play() yöntemi başa sarılan görüntünün izlenmesini sağlar.

Atlamadan sonra tüm kod aşağıdaki gibidir.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function formatTime(item:Date):String {
                return dateFormatter.format(item);
            }

            private function videoDisplay_playheadUpdate():void {
                /* If playhead time is 0, set to 100ms so the DateFormatter doesnt return an empty string. */
                var pT:Number = videoDisplay.playheadTime || 0.1;
                var tT:Number = videoDisplay.totalTime;

                /* Convert playheadTime and totalTime from seconds to milliseconds and create new Date objects. */
                var pTimeMS:Date = new Date(pT * 1000);
                var tTimeMS:Date = new Date(tT * 1000);

                timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
            }

            private function slider_thumbPress():void {
                videoDisplay.pause();
            }

            private function slider_thumbRelease():void {
                videoDisplay.playheadTime = slider.value;
                videoDisplay.play();
            }

            private function videoDisplay_ready():void {
                videoDisplay.visible = true;
                controlBar.visible = true;
            }
        ]]>
    </mx:Script>

    <!-- Only show minutes and seconds. -->
    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />

    <mx:Zoom id="zoom" />

    <mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">
        <mx:VideoDisplay id="videoDisplay" visible="false" showEffect="{zoom}"
            playheadUpdate="videoDisplay_playheadUpdate()"
            ready="videoDisplay_ready()"
            rewind="videoDisplay.play()"
            source="http://www.helpexamples.com/flash/video/cuepoints.flv" />

        <mx:ControlBar id="controlBar" visible="false">
            <mx:HSlider id="slider" width="100%"
                allowTrackClick="false"
                invertThumbDirection="true"
                liveDragging="false"
                maximum="{videoDisplay.totalTime}"
                minimum="0"
                thumbPress="slider_thumbPress()"
                thumbRelease="slider_thumbRelease()"
                tickInterval="1"
                value="{videoDisplay.playheadTime}" />
            <mx:Label id="timeLabel" textAlign="right" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>