Basic Video Player in Flex

Check this tutorial where you will learn quickly how to build a simple video player

View DemoDownload Source

1. Create a new flex project named BasicVideoPlayer, name your MXML application file main.mxml and set its layout to vertical.

2. First add a VideoDisplay, set its id to player and its source to the path or url of the video to display. Set maintainAspectRatio to true, its width and height as you like and autoplay property to false.

3. Next we build the controls.
Put a ProgressBar under the VideoDisplay, set its id to progressBar, bind its width with VideoDisplay’s width and set its mode to manual.

Then, place an HBox beneath the ProgressBar.
Inside the HBox put 4 buttons with their respective labels : Play, Pause, Stop, Mute.
Also, add an HSlider and a Label.

Give the Mute button an id of muteBtn and set the id of the slider to volSlider.
You can set the ids of the others but not necessary as we won’t need a reference of them.
For now your code should look like that :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" backgroundGradientColors="[#FFFCFC, #000000]" 
    backgroundGradientAlphas="[1.0, 0.93]" horizontalAlign="center">
	
	<mx:Label text="Basic Video Player in Flex" fontFamily="Georgia"
               fontSize="30" fontWeight="bold" color="#6D0A26"/>
	<mx:VideoDisplay id="player" source="assets/Pixar_Presto.flv" 
		maintainAspectRatio="true"  
		width="450" height="300"  autoPlay="false"
		playheadUpdate="videoDisplay_playheadUpdate(event);"/>
	<mx:ProgressBar id="progressBar" mode="manual" label=" " width="{player.width}"/>
	<mx:HBox width="450">
		<mx:Button label="Play"/>
		<mx:Button label="Pause"/>
		<mx:Button label="Stop"/>
		<mx:Button id="muteBtn" label="Mute" />
		<mx:HSlider id="volSlider" 
		    width="100"/>
		<mx:Label text="" color="#FFFFFF" />
	</mx:HBox>
	
</mx:Application>

4. Next we will add the functions.
For the play button, we use the play() function on the reference of our VideoDisplay which is player. We add this function to the click event.

<mx:Button label="Play" click="player.play()"/>

Do the same process with the pause and stop button by calling the pause() and stop() methods.

5. To manage the volume we’ve got a slider and a mute/unmute button.
Set the min value of the slider to 0 and the maxvalue to 1. (0 < = volume <=1) When the change event occurs which means that the user has moved the slider, set the volume of the player to the value of the slider :

<mx:HSlider id="volSlider" 
		liveDragging="true" 
		minimum="0.0"
		maximum="1.0"
		value="1.0"
	        snapInterval="0.01"
                change="player.volume=volSlider.value" width="100"/>

For the mute/unmute button we need to create a muteHandler function that will be called when the click event is dispatched.
Create a Script tag and add the following code:

private var mute : Boolean = false;
			
private function muteHandler(event:MouseEvent):void{
	if (!mute) {
		player.volume = 0;
		mute = true;
		muteBtn.label = "Unmute";
	}
	else{
		player.volume = volSlider.value;
		mute = false;
		muteBtn.label = "Mute";
	}
}

The mute variable of type Boolean keeps track of the status of the mute/unmute button.
The function checks the value of the variable mute. If false, it sets the volume of the player to 0 and sets the label of the muteBtn to Unmute.
Otherwise, it sets the volume of the player to the value of the slider which has kept track of the volume before.

6. Then we add a formatTime function to display correctly the time that returns a formatted String.

private function formatTime(value:int):String{
	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;
}

7. Finally we add a function to manage the progress of the ProgressBar.

private function videoDisplay_playheadUpdate(event:VideoEvent):void{
	progressBar.setProgress(event.playheadTime, player.totalTime);
}

8. And here is the final code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	backgroundGradientColors="[#FFFCFC, #000000]" 
	backgroundGradientAlphas="[1.0, 0.93]" horizontalAlign="center">
	
	<mx:Script>
		<![CDATA[
		import mx.events.VideoEvent;
			
		private var mute : Boolean = false;
			
		private function muteHandler(event:MouseEvent):void{
			if (!mute) {
				player.volume = 0;
				mute = true;
				muteBtn.label = "Unmute";
			}
			else{
				player.volume = volSlider.value;
				mute = false;
				muteBtn.label = "Mute";
			}
		}
			
		private function formatTime(value:int):String
		{
			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 videoDisplay_playheadUpdate(event:VideoEvent):void{
			progressBar.setProgress(event.playheadTime, player.totalTime);
		}
		
		]]>
	</mx:Script>
	
	<mx:Label text="Basic Video Player in Flex" fontFamily="Georgia" 
		fontSize="30" fontWeight="bold" color="#6D0A26"/>
	<mx:VideoDisplay id="player" source="assets/Pixar_Presto.flv" 
		maintainAspectRatio="true"  
		width="450" height="300" autoPlay="false"
		playheadUpdate="videoDisplay_playheadUpdate(event);"/>
	<mx:ProgressBar id="progressBar" mode="manual" label=" " width="{player.width}"/>
	<mx:HBox width="450">
		<mx:Button label="Play" click="player.play()"/>
		<mx:Button label="Pause" click="player.pause()"/>
		<mx:Button label="Stop" click="player.stop()"/>
		<mx:Button id="muteBtn" label="Mute" click="muteHandler(event)" width="70"/>
		<mx:HSlider id="volSlider" 
			liveDragging="true" 
			minimum="0.0"
		        maximum="1.0"
		        value="1.0"
		        snapInterval="0.01"
		        change="player.volume=volSlider.value" width="100"/>
		<mx:Label text="{formatTime(player.playheadTime)} / {formatTime(player.totalTime)}" 
			color="#FFFFFF" width="73"/>
	</mx:HBox>
	
</mx:Application>

9. Run the application to test your video player.

20 thoughts on “Basic Video Player in Flex

  1. Nina

    Hi!
    Well done!
    But I have a question. I try to make my own player but I’d like to add a slider on the progress bar, which can be move using the mouse (like You Tube or Dailymotion). Do you know how I can proceed?

  2. benDizzle

    @Nina,

    Try using a HSlider on top of progress bar and use absolute positioning. You could also just create one in AS3 using embedded .png’s. There’s a couple of tutorials on how to create scrubber’s in AS3 with very minimal effort. Also to note, you can replace those buttons with your own. Look up how to skin a component in photoshop. Take care and hope it helps, by the way Google is your friend.

    @Creator

    Great simple way to create a video player. This should help many out there. Keep the tutorials coming.

  3. Pingback: Flex: Developing a Simple Video Player with « Pankaj Lalwani’s Blog

  4. Guillermo

    Is there any way to check for the existance of a RTMP file and if it doesn’t to play a different one?
    In my case I have some .FLV videos on the server, but new ones are coming as .MP4, I am trying to make it able to detect if the file exists to play the right file.
    Any help will be appreciated.

  5. bachmann

    is to possible that flex (flash) checks a folder with Movies?
    which i can select on a table and play it in the player?

  6. amarshukla123

    Slightly Buggy , If you click on mute button and change the slider value .It gets unmute but label doesn’t change.Simply make a function and call it at hslider chaneg event and dats it.

    private function muteANDunmute(event:SliderEvent):void{
    player.volume=volSlider.value;
    if(mute){
    muteBtn.label = “Mute”;
    mute = false;
    }
    }

  7. kunal adhikari

    Please let me know what syntax error you getting because its working absolutely fine. However can any one help me that how to play a live streaming from this player.i want to play it from camera(live).

  8. aj

    @ABDESSAMAD IDRISSI – you need to adjust it to fit FB 4.. Flex 3 doesn’t work on FB without editing

    know how to implement slow mo at FLV videos using Flex?

    thanks in advance

  9. Tri

    Thanks, it’s good, but I have a problem: with some files, it can play audio of that files but with video is not display on screen, but with some files it is normal.

  10. Raju

    Can we load multiple videos for playing.
    Can we seek and start and also stop in videos
    Can we load multiple videos and also seek and start accordingly

  11. raj

    Hi,

    Is it possible to play .MP4 format files on flex 4.6 video player? can any one help me please…..

    Thanks,
    Rajkumar

Leave a Reply

Your email address will not be published. Required fields are marked *