Home » Flex, Tutorials

Flex 3 | Simple FLV Player | Scrubbing, Pause, and Play

1 November 2008 | 22,693 views | 4 Comments


Using Flex, it’s extremely easy to create a simple FLV player. This simple flv player has a scrub bar, pause/play buttons, and can load a flv from any url. The example is pretty basic, but it’s a great starting point on understanding how to stream video using Flex.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            private function formatTime(item:Date):String {
                return dateFormatter.format(item);
            }
            private function videoDisplay_playheadUpdate():void {
                var pT:Number = videoDisplay.playheadTime || 0.1;
                var tT:Number = videoDisplay.totalTime;
                var pTimeMS:Date = new Date(pT * 1000);
                var tTimeMS:Date = new Date(tT * 1000);
                timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
            }
            private function slider_thumbPress():void {
                videoDisplay.pause();
            }
            private function slider_thumbRelease():void {
                videoDisplay.playheadTime = slider.value;
                videoDisplay.play();
            }
            private function videoDisplay_ready():void {
                videoDisplay.visible = true;
                controlBar.visible = true;
            }
        ]]>
    </mx:Script>
    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
    <mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">
        <mx:VideoDisplay id="videoDisplay" visible="false" width="100%" height="100%"
            playheadUpdate="videoDisplay_playheadUpdate()"
            ready="videoDisplay_ready()"
            rewind="videoDisplay.play()"
            source="http://www.derekentringer.com/flv/purple_plasma.flv" />
        <mx:ControlBar id="controlBar" visible="false">
        	<mx:Button id="play" name="play" label="Play" click="videoDisplay.play()"></mx:Button>
        	<mx:Button id="pause" name="pause" label="Pause" click="videoDisplay.pause()"></mx:Button>
            <mx:HSlider id="slider" width="100%"
                allowTrackClick="false"
                invertThumbDirection="true"
                liveDragging="false"
                maximum="{videoDisplay.totalTime}"
                minimum="0"
                thumbPress="slider_thumbPress()"
                thumbRelease="slider_thumbRelease()"
                tickInterval="1"
                value="{videoDisplay.playheadTime}" />
            <mx:Label id="timeLabel" textAlign="right" />
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

See the example

Download the source

  • deadbrain

    Hi, Can the player do progressive streaming, I tried the code with a flv file which is 20 minutes long, it waited for the buffer to reach 100% before the video was shown, any suggestions>?

  • chetan

    superb!!! it worked for me. thanks………. 😀

  • chetan

    superb!!! it worked for me. thanks………. 😀

  • neat!