How to customize video player progress bar?

Question

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?

Answer 1

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>