Custom Video Seek Bar Control in Flex 4

Question

I am creating a custom video player in Flex 4.

I need to create a custom seek bar such that it has three layers, same as the youtube video player has. First layer is the background, second layer is the download progress and the third layer is the elapsed video. The seek bar would be click able as well.

How can I create such component in Flex 4.

Answer 1

Unfortunately, I do not believe the built in ScrubBar class has this functionality so you would be better off building it on your own (rather than adding it to that class).

To do this, I would create a new MXML component based on Group. Within that component, you need four things: three Rects for your bars/background and an ellipse (or another rect or whatever you want) for the playhead. Layer them on top of each other. Set the background rect to be 100% height and width, the other two to just be 100% height.

Now, what you want to do is create an section and write some AS3 to handle the changes. Note that this is how I personally would do it, but not necessarily how you must do it. For instance, I know most people would frown upon the use of getters-setters, but I think this is the perfect opportunity for it.

private var _progress:Number; //0-1
private var _download:Number; //0-1

public function set progress(value:Number):void{
    this._progress = value;
    this.progressBar.percentWidth = value * 100;
    this.playhead.x = value * this.width - this.playhead.width / 2;
    this.dispatchEvent(new Event(Event.PROGRESS)); //this line is optional and you would be better suited creating your own VideoEvent class to handle events across the entire player rather than using the built in events.
}

public function get progress():Number{
    return this._progress;
}

public function set download(value:Number):void{
    this._download = value;
    this.downloadBar.percentWidth = value * 100;
}

public function get download():Number{
    return this._download;
}

Obviously, that is just the basics. You could go much further into it and add more functionality. For instance, there is no functionality for scrubbing the playhead or clicking on the progress bar to seek. Both are relatively easy to implement, however, just make sure you dispatch events so that you can know from other classes when these things happen.

Now, from your Video Controls class, you'll need to tie the progress and download properties of your scrubbar class to your VideoDisplay or NetStream events. To do this, you would simply add eventListeners to whichever you use that listen for Progress and buffer changes (Unsure what you would use for VideoDisplay, but for NetStream you have to listen for NetStatus.STATUS to get buffer and other goodies and you have to create a Timer to listen for the progress, unfortunately). In each respective function, you simply set the proper property to the value your VideoDisplay or NetStream object gives you (In NetStream's case, ns.time for current time and ns.bytesLoaded for download).

I only skimmed over what you need to do, but this should hopefully give you enough of an idea to start work on this.