Avg. Rating 4.1

Problem

in Flex 1.5 we had a nice Player, this is not a smal problem to overcome if you are new to flex :)

Solution

here is a easy sample whit Play, Pause, Stop, Volume, and Seek, there is even a link to a real flv ver 1.1 file these files have meta-data so you can get the info from the movie like TotalTime and heigth and with,

Detailed explanation


Hi here is a update!


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



<mx:Script>
<![CDATA[
        import mx.events.VideoEvent;
        import mx.events.FlexEvent;
        import mx.events.SliderEvent;

/** Cato Paus Skrede
  UmbrellaCorp DA
http://www.umbrellacorp.no
**/

        
         [Bindable]
         private var movie:String;
        
         private var _timer:Timer;

         private function setSource():void{
          //movie = "http://stage.orchestra.it/x.flv";; // some dud
dancing 16 min sample.
                movie = "http://stage.orchestra.it/golfers.flv";;
                _timer = new Timer(25,0);
                _timer.addEventListener(TimerEvent.TIMER, onTimer);
                _timer.start();
               
          // the url of the FLV ver. 1.1 do contains the metaData for
totalTime FLV ver 1.0 do's NOT.
          /* if you type the url into VideoDisplay.source and use
autoplay it starts to play in design mode
             that's realy annoying.*/
          videoDisplay.volume = 0.01;  
         }
        
        
         private function onTimer(event:TimerEvent):void
         {
                scrubBar.value = videoDisplay.playheadTime;
         }
       
       
        private function sliderThumbEvent(event:SliderEvent):void
        {      
                trace(event.currentTarget.value);              
                if(event.type == SliderEvent.THUMB_PRESS)
                {
                        _timer.removeEventListener(TimerEvent.TIMER,
onTimer);                      
                }
                else
                {      
                        videoDisplay.playheadTime = scrubBar.value;
                       
                        videoDisplay.addEventListener
(VideoEvent.PLAYHEAD_UPDATE, onVal);
                }
        }
       
        private function onVal(event:VideoEvent):void
        {
                videoDisplay.removeEventListener
(VideoEvent.PLAYHEAD_UPDATE, onVal);
                _timer.addEventListener(TimerEvent.TIMER, onTimer);
               
        }
       
        public function updateVolume(event:Event):void
        {
                videoDisplay.volume = (volumeSlider.value) * .01;
        }

        private function formatPositionToolTip(value:int):String
        {
                //  do only handle minuts.
                        var result:String = (value % 60).toString();
                        if (result.length == 1)
                        {
                                result = Math.floor(value /
60).toString() + ":0" + result;
                        }
                        else
                        {
                                result = Math.floor(value /
60).toString() + ":" + result;
                        }
                return result;
        }
       
        private function formatVolumeToolTip(value:int):String
        {
               
                        var result:String = (value % 100).toString();
                        if (result.length == 1)
                        {
                                result = Math.floor(value).toString()
+ " % volume";
                        }
                        else
                        {
                                result = Math.floor(value).toString()
+ " % volume";
                        }
                return result;
        }




]]>
</mx:Script>



         
           <mx:Panel layout="absolute" width="400" height="400"
                headerHeight="0" cornerRadius="2" borderStyle="solid"
borderThickness="0"
                borderThicknessBottom="0" borderThicknessLeft="0"
borderThicknessRight="0"
                borderThicknessTop="0" backgroundColor="#000000">
 
  <mx:VideoDisplay id="videoDisplay"  source="{movie}" width="380"
height="310" left="10" top="10"/>

  <mx:ProgressBar id="loadProgress" label="" mode="event"
barColor="#00ff00"
   minimum="0" maximum="100" y="336" height="20"
   source="{videoDisplay}" trackHeight="10" trackColors="[#FF0000,
#e6eeee]" left="10" right="10"/>

  <mx:HSlider id="scrubBar" height="5"  
                       
        dataTipFormatFunction="formatPositionToolTip"
                                thumbPress="sliderThumbEvent(event)"
thumbRelease="sliderThumbEvent(event)"
                                minimum="0"
maximum="{videoDisplay.totalTime}" liveDragging="false"
snapInterval="0.1" left="4" right="4" bottom="62"/>

  <mx:Button label="Play" click="videoDisplay.play();"
cornerRadius="0" bottom="10" x="10"/>
        <mx:Button label="Pause" click="videoDisplay.pause();"
cornerRadius="0" bottom="10" left="69"/>
        <mx:Button label="Stop" click="videoDisplay.stop();"
cornerRadius="0" left="138" bottom="10"/>
       
        <mx:HSlider id="volumeSlider"
dataTipFormatFunction="formatVolumeToolTip" showDataTip="true"
snapInterval="1" value="0.5" maximum="100"
                                        thumbDrag="updateVolume
(event);"
                                        liveDragging="true"
height="20" left="236" bottom="20" width="154"/>
       
        <mx:Label styleName="playheadTimeLabel"
         text="{formatPositionToolTip(videoDisplay.playheadTime)} -
{formatPositionToolTip(videoDisplay.totalTime)}"
         color="#ffffff" left="5" top="0"/>

</mx:Panel>


       
       


  <mx:Button click="setSource()" label="Get FLV"/>

</mx:Application>

Report abuse

Related recipes