Click for demo!

Addition to those advertisement features, Wow XML Flash Video Player helps you keep your video files hidden. This is handled with a hidden xml file, queried inside flash video player. This is crucial to prevent bandwidth theft also keeping your visitors coming to your site, since there will be no way to download video files.

All of the features, can be configured with few easy steps, by just modifying an xml file and adding few parameters into HTML. That’s all. All is well explained in our documentation, that will be provided you if you purchase.

Features:

• Hides your exact video path ( Videos are fetched from XML )
  Video path is hidden in XML file. The XML file path can only be seen in Actionscript, which means anyone willing to hack your video path, to steal bandwidth, has to have your FLA file, which he will not have.
• No need to edit FLA. Configure this flash video player using XML
  All the features of this video player, can be configured easily with html code
• Define the path to your video in the XML
  Video path is kept in an xml file. Our documentation explains how to use this file, even demonstrates an example of php coded dynamic video site.
• Enhanced advertisement functions
  You can have a pre-roll video advertisement for your video, just by configuring your video player using HTML. You can also have in-video text ads, again configurable. Let’s just say, on the 6th second of the video, you want to advertise Google.com, configuration is so easy. Then you will have a popup inside the video when it reaches to the 6th second. See the demo.
• Auto Play Feature
  You can easily set the video to auto play or not. If not, you can also have a preview image before the video plays.
• Post-Video Related/Featured Videos Screen
  You can guide your visitors to view more videos, by showing 3 recommended/related videos at the end of the video.
• Your Web Site’s Logo on Video Screen
  You can also have your site’s logo on video screen, it is totally configurable with HTML. No need to edit FLA.
• Fully customizable
  Some of the customizable features:
  • Auto Play: True or False
  • Pre-roll Ads: True or False
  • Video Preview Image: True or False
  • In-video Ads: True or False
  • Post-video related videos screen: True or False
  • Your logo on screen: True or False
• Can easily be reskinned and resized

If you buy, You get:

• FLA. You can easily customize the skin of your video player.
  .fla files contain source material for the Flash application. Flash authoring software can edit FLA files and compile them into .swf files.
• SWF. Wow XML Flash Video Player.
• DOC. Detailed documentation on using Wow XML Flash Video Player
• PHP-XML coded video site example with Wow XML Flash Video Player.
• Upgrades are totally free.
• Unlimited Support. We even help you build your video web site !

Technical Specifications:

• Adobe Flash Player 10
• Actipscript 2. MediaDisplay used.
• SWF File: 66KB
• Plays FLV files
• Progressive Download

More Features and It’s Customizable! Check it out

The video below, is set to auto-play:false. Preview image is set. In-video ad is set. Pre-roll video ad is set. Post-video screen is enabled. Click here for an auto play version.

If you are having problems purchasing this software, please contact us.

In this tutorial, we’ll show you how to code and design your custom flash video player step by step. We hope it will be a good resource for the flash newbies.

Click for an example.

Important Notes Before Beginning

• Don’t forget to set the instance names of the movieclips as stated, otherwise, the actions will not work!
• Pay attention to italic statements. They will be telling you which layer & movieclip you are working on!
• FullScreen button will only work if you have <param name=”allowFullScreen” value=”true” /> in your HTML.

Design Part:

First,  create a new flash document (ActionScript 2.0) and set the size and the frame rate as you wish. A frame rate of 30fps is typical. Speaking of document size, you should keep in mind that if you are streaming 4×3 ratio videos, you should obey this ratio also adding the height of control bar which we will use. We, in this tutorial, set the size to 489 x 400 px.

As background color, we suggest you to set it same with your website’s background color. But it is up to you, of course.

Scene 1 (layer:background)

Now name the first layer “background” and put whatever you want to display on the background of your video player. We placed a black fading background for the control bar here.

Scene 1 (layer:controls)

Create a new layer, named “controls”. Then, draw your control bar buttons that will trigger video to pause, play, rewind, mute and resize to fullscreen.

Convert all buttons to movie clips by selecting and hitting F8. Name each as you wish. Then in the properties window, set the instance name of each movie clip. Instance names of the buttons in our example; “pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” and “fullscreen_btn” in order.

Scene 1 > volume (layer:Layer1)

As you can guess, volume and fullscreen buttons must have different views when clicked. So, first, click on the volume button to edit further. Inside the movieclip, create two frames, one for mute, one for unmute.

Scene 1 > fullscreen (layer:Layer1 & Layer2)

Repeat the same process for the fullscreen button. Two parts of the fullscreen button, the arrow and the rectangle is split to two layers in my example. You are totally free on that.

Scene 1 (layer:controls)

For the scrub bar, you will draw 2 thick lines, one long and horizontal, and one short and vertical. Convert each line you drew to movieclip by selecting and hitting F8. Set the instance name of the long line, which will be used as the video timeline, “mc_track”. Instance name of the knob, the short line, can be set as “mc_knob”. Finally, select both movieclips together and hit F8 to merge both into one movieclip, which we named “mc_scrubber”.

Now, select all movie clips together ( Shift + click each one ) and hit F8 again to merge all movie clips in one clip. Name it “mc_controls”.

Scene 1 (layer:video)

Now, create a new layer, named “Video”. Open the components panel or hit directly Ctrl+F7 and drag the MediaDisplay component to the newly created layer. For the video to show up in the whole screen of video player, you must resize the component to fill all white area. After resizing, click on the MediaDisplay component and open the component inspector tools ( Shift + F7 ). In the parameters tab, uncheck “Automatically Play”, “Use Preferred Media Size” and “Respect Aspect Ratio”. You can use it “Automatically Play” checked if you want that way.

Scene 1 (layer:stroke)

For the video screen to be more stylish, create a new layer over the “video” layer, name it “stroke” and grap the rectangle tool to draw a rectangle ( black + 1 px border ) with the same dimensions of MediaDisplay component. This is to cover the component with a stroke around. Now, we have a better video player look.

ActionScript Part:

Scene 1 (layer:actions)

Actionscript part is the important part to add the functionality to our design. First, we begin with defining the relative path of the video file. Create a new layer, named “actions”. Click on the first frame and open the actions panel. Type the following code to define the FLV address. Keep in mind that, this video player is only able to play FLV files.

The path, “video/video.flv” is the relative path for the video file, named “video.flv”. “FLV” expresses that the video player will be used to play FLV files. The other option is “MP3″.

Scene 1 > mc_controls (layer:othercntrls)

Now time to add “actions” for the control buttons. Click on the “mc_controls” movie clip, that must be in “controls” layer normally. Click twice to edit this movie clip, Inside “mc_controls”, create 3 layers and names in order: “progress”, “actions”, “othercntrls”. Put all the control bar buttons (”pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” and “fullscreen_btn” ), created before, into “othercntrls” layer. “actions” layer again will keep all the actionscript and “progress” layer will hold the scrub bar for the video player.

Click here for more about this step.

Scene 1 > mc_controls (layer:actions)

Now, click on the “actions” layer, open the actions panel for this layer (F9). Add the following code into actions panel.

video = _root.video;
//play button function
play_btn.onRelease = function() {
video.play();
};
//pause button function
pause_btn.onRelease = function() {
video.pause();
};
//fullscreen function
fullscreen_btn.onRelease = function() {
video.displayFull();
toggleFullScreen();
};
 
//rewind function, stop(0) can also be used.
rewind.onRelease = function() {
video.play(0);
};
 
//mute and unmute
mc_volume.onRelease = function() {
mc_volume.play();
};
 
//This part is for the fullscreen function
Stage.scaleMode="Scale";
Stage.align = "TC";  //T:top, C: center
function toggleFullScreen(){
if(Stage["displayState"]=="normal"){
Stage["displayState"]="fullScreen";
fullscreen_btn.gotoAndStop(2);
}else{
Stage["displayState"]="normal";
fullscreen_btn.gotoAndStop(1);
}
}

Scene 1 > mc_controls > volume (layer:Layer1) & Scene 1 > mc_controls > fullscreen

For the volume button and the fullscreen button, only the first frames of those movieclips must be appearing on the screen if not clicked. When those buttons clicked, movieclips must play the second frames and stop there. To do that, add a stop function into the every frame of fullscreen and volume movieclips. In the code above, it can be seen that clicking the button, will play those stopped movieclips, meaning the second frame will appear on screen.

Scene 1 > mc_controls > volume (layer:Layer1)

For the volume button, to mute and unmute the sound. We will add two pieces of code after stop function in actions panel, that changes the state of sound for that frame.

For frame 1, put the following code into actions panel. When this frame plays, sound will be unmuted.

stop();
_root.video.volume = 100;

For frame 2, put the following code into actions panel. This frame will decrease the volume to zero.

stop();
_root.video.volume = 0;

In sum, we have a video screen, that has the path for the video file, a rewind button, a pause button, a play button, a volume control button and a fullscreen button. The only thing left is a scrub bar’s (seek bar) functions.

Scene 1 > mc_controls > mc_scrubber (layer:Layer1)

Scrub bar needs the following code. So, click on “mc_scrubber” movieclip and create a new layer for the actions. Copy and paste the following code, into the actions panel.

video = _root.video;
mc_knob.onPress = function() {
mdown = true;
this.startDrag(false, 0, 0, mc_track._width, 0);
};
mc_knob.onRelease = function() {
mdown = false;
this.stopDrag();
};
mc_knob.onReleaseOutside = mc_knob.onRelease();
this.onEnterFrame = function() {
if (mdown) {
dist = mc_knob._x;
pct = dist/mc_track._width;
newVol = pct*video.totalTime;
video.playheadTime = newVol;
} else {
dist = video.playheadTime;
pct = dist/video.totalTime;
newX = pct*mc_track._width;
mc_knob._x = newX;
}
};

That’s it. You must now have had a simple flash video player for your web site. This is my result:

More Features in Wow XML Flash Video Player. Check it out!

If you are unable to end up with a result like above or you are looking for a more advanced player, here it is. We have the Wow XML Flash Video Player. It’s just $12, including the FLA.

The video below, is set to auto-play:false. Preview image is set. In-video ad is set. Pre-roll video ad is set. Post-video screen is enabled. Click here for an auto play version.