6 Replies Latest reply on Dec 22, 2007 5:41 AM by adrianogf

    how to customize video player progress bar?

    huson Level 1
      I want a video progress bar (maybe it is a slider ), which can be used to show the buffer progress of video, the standard slider control in Flex has not this function.

      How can I customize the silder control?
        • 1. Re: how to customize video player progress bar?
          huson Level 1
          Anyone can help me?
          • 2. Re: how to customize video player progress bar?
            rotoole
            this is a very basic video player. what we've done here is A LOT of binding i.e. vp.playheadTime=(vp.totalTime/(100/ctr.value))
            after you've figured out what the right math is..which is already done here, you can just skin it and it'll work fine. i haven't had the time to update this for a while but there is definitely room for improvement. hope this helps.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">

            <mx:Script>
            <![CDATA[

            public function init(path:String):void
            {
            vp.source = path;
            vp.play();
            }



            public function fixIt(what:Number):Number
            {

            what.toFixed(2);
            return Number(what);
            }

            ]]>
            </mx:Script>
            <mx:VideoDisplay autoPlay="false" id="vp"/>
            <mx:HSlider minimum="0" maximum="100" width="{vp.width}" height="29" id="ctr" value="{fixIt(vp.playheadTime/(vp.totalTime/100))}" change="vp.playheadTime=(vp.totalTime/(100/ctr.value))" liveDragging="true"/>
            <mx:Label id="duration" text="{int(vp.playheadTime)}"/>
            <mx:HBox>
            <mx:Button id="pp" label="Play/Pause" click="if(!vp.playing){vp.play()}else{vp.pause()}"/>
            <mx:Button id="st" label="Stop" click="vp.stop()" />
            <mx:Button id="rw" label="Rewind" click="vp.playheadTime=0" />
            </mx:HBox>
            </mx:VBox>
            • 3. Re: how to customize video player progress bar?
              huson Level 1
              I want a bar with video download progress indicator, how can I create that bar?
              • 4. Re: how to customize video player progress bar?
                LongDonJohn
                AS:

                private function calculateStream(event:ProgressEvent):void{
                videoProgress.setProgress(event.bytesLoaded,event.bytesTotal);
                }

                MXML:

                <mx:VideoDisplay progress="calculateStream(event)" id="videoDisplayer" />
                <mx:ProgressBar mode="manual" id="videoProgress" />

                The rest ist styling...
                • 5. Re: how to customize video player progress bar?
                  dafunkeemonkee
                  I'm trying to do the same thing, where the progress bar indicator is on the slider bar itself (a la youtube). i don't know if the previous answers solves this question. does this require building a custom component extending Slider?

                  • 6. Re: how to customize video player progress bar?
                    adrianogf Level 1
                    Try to use Canvas container to place components on top of each other...

                    Example:

                    <mx:Canvas>
                    <mx:ProgressBar id="progressBar" mode="polled" source="{videoDisplay}" height="20" conversion="1024"
                    labelPlacement="center" />

                    <mx:HSlider alpha="0.5" value="{videoDisplay.playheadTime}" change="videoDisplay.playheadTime = horizontalSlider.value" thumbPress="videoDisplay.pause()" thumbRelease="videoDisplay.play()" height="12" id="horizontalSlider" minimum="0" maximum="{videoDisplay.totalTime}"/>

                    </mx:Canvas>


                    Adriano