Flex | Flash | Air | AS3
Basic Video Player in Flex
March 26th, 2009 in FlexCheck this tutorial where you will learn quickly how to build a simple video player
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.
Apr 29th, 2009
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?
Jun 16th, 2009
@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.
Jun 29th, 2009
[...] http://www.riacodes.com/flex/basic-video-player-in-flex/ [...]
Jul 13th, 2009
Nice tutorial on VideoDisplay. Thanks for sharing!
Aug 5th, 2009
Great tutorial btw…
Aug 18th, 2009
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.
Feb 19th, 2010
Awsome thanx! Buenìsimo muchas gracias!
Feb 23rd, 2010
is to possible that flex (flash) checks a folder with Movies?
which i can select on a table and play it in the player?
Feb 28th, 2010
thanks bro, just what I needed
Mar 8th, 2010
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;
}
}