Newtriks LTD

Interactive Development specialising in web-applications

A Flex Video Scrubber Using HSlider

I have noticed there are not to many resources for building a scrubber to use in a custom Flex video application. I have noticed a great start located here at Flex Examples for use with the VideoDisplay control, however, I tend to create a class that extends UIComponent and pops in a Video Object. So in comparison to the above tutorial I track playhead time and length of flv content from the NetStream and MetaData. So in a nut shell here is a simplified version of how I built the scrubber, this is snatch and grab code from my player so has elements of the framework I use (PureMVC), I will work on a simple demo in another post yo:

Main workflow is: + HSlider thumb value changes according to the current NetStream time using a Timer event + HSlider thumb pressed and NetStream paused, Timer reset + HSlider thumb released and NetStream seeks to HSlider release point value + Timer restarted and NetStream start play

HSlider component 

1
2
3
4
5
6
7
8
9
10
11
12

<mx:Metadata>
      [Event("press")]
      [Event("release")]
</mx:Metadata>
  
  <mx:Script>
      <![CDATA[
          public static const PRESS:String = "press";
          public static const RELEASE:String = "release";
          
      ]]>
  </mx:Script>
1
2
3
4
5
6

<mx:HSlider id="scrubber" dataTipPlacement="top" thumbOffset="3" width="105"
        allowTrackClick="false" borderColor="#BDBDBD" trackColors="#FFFFFF,  
                 #FFFFFF" liveDragging="false" useHandCursor="true" buttonMode="true"
        thumbPress="{ dispatchEvent( new Event( PRESS ) ) }"
        thumbRelease="{ dispatchEvent( new Event( RELEASE ) ) }" 
        x="0" y="0"/>

Class receiving dispatched events from Hslider component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

private function setDuration():void
      {
          avHolder.scrubber.minimum = 0;
          avHolder.scrubber.maximum = meta.duration;
      }
      
      private function trackProgress( ns_time:Number ):void
      {
          // Dispatched current time value of the net streams play position
          avHolder.scrubber.value = ns_time;
          
      }
      
                // Started scrubbing so pause the stream
      private function onScrubStart( e:Event ):void
      {
          sendNotification( ApplicationFacade.CONTROL_STREAM, "pause" );
      }
      
                // Tell the class handling the nest stream what the time value of the scrubber was on release
      private function onScrubStop( e:Event ):void
      {
          var scrubTime:Number = avHolder.scrubber.value;
          
          sendNotification( ApplicationFacade.SCRUB, scrubTime );
      }

Class handling Net Stream

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// This method is called every 10 ms using the Timer class
public function scrubStream( scrubTime:Number ):void
      {
                        // Scrubber moved and released
          ns.seek( scrubTime );
                        // Rebuild the timer
          buildDurationTimer();
                        // Start playing stream
          ns.togglePause();
      }

// Called when the scrubber is pressed, ensures the timer is removed and the stream is paused
public function pauseStream():void
        {
          ns.pause();
          resetTimer();
        }

public function resetTimer():void
        {
          t.stop();
      t.reset();
      t.removeEventListener( TimerEvent.TIMER, timerHandler );
        }
        
public function toggleStream():void
        {
          ns.togglePause();
        }

Comments