While creating an interactive training application, I had to play video in a box after video image thumbnail click and all the background UI need to be disabled so that user could only go back to main interface after hitting the close button attached to the video player container box.
I used FLVPlayback 2.5 component available in Flash Professional to progressively download and play the flv video file. I also added the skin (available from Flash Component Properties Panel) for the FLVPlayback.
The ActionScript 3 FLVPlayback 2.5 component allows to include a video player in Flash application. With the FLVPlayback component you can play progressively downloaded Flash Video files over http or play streaming video files from Flash Media Server.
To display a video on stage using the FLVPlayback 2.5 video component with AS3, follow these steps:
- You can add the FLVPlayback component to your application by dragging the FLVPlayback component from the Components panel onto stage. Once you do it, you can delete it from stage. It has been added in the library now automatically.
- To view the available FLVplayback skins, while the FLVPlayback component is still selected on the Stage, click the skin parameter Value cell to open the Select Skin dialog box under Properties Panel.
- Create a new Movie Clip symbol, name it “container” and check the “Export for Action Script” box. This will act as video holder.
- Create a new Movie Clip symbol, name it “closeBt” and check the “Export for Action Script” box. Draw a circle and a cross over it to make it look like close button.
Add following code in Actions panel on frame 1:
var video_holder:MovieClip = new MovieClip();
//Attach the holder mc to the stage
addChild(video_holder);
video_holder.x =60;
video_holder.y =50;
//provide a video file url here, it does not have to be an absolute url
//you can add relative url here too, just make sure path is correct
var video_file='http://www.helpexamples.com/flash/video/water.flv';
var close_button:closeBt = new closeBt();
//attach the close button to the video holder
close_button.x =-124;
close_button.y =-29;
close_button.buttonMode =true;
video_holder.addChild(close_button);
close_button.addEventListener(MouseEvent.CLICK, closeVideo);
function closeVideo(event:MouseEvent):void{
removeChild(video_holder);
trace(event.currentTarget.name);
}
function launchVideo(vBox, vFile):void{
import fl.video.*;
var flvPlayer:FLVPlayback = new FLVPlayback();
//The next line assumes you have copied the skin file to the directory
//that contains the published SWF file.
flvPlayer.skin = 'SkinOverPlaySeekStop.swf';
flvPlayer.source = vFile;
flvPlayer.skinAutoHide=true;
flvPlayer.skinBackgroundColor = 0x434B54;
flvPlayer.width=425;
flvPlayer.height=300;
vBox.addChild(flvPlayer);
}
//Display video by calling launchVideo whenever you have to do it
launchVideo(video_holder, video_file );
If you find anything confusing, I have put together this fla file, you can download FLV Playback demo .fla from here.
Hope that helps.
Cheers!
Ignore my previous question. I made it work. It was a problem with my script but i found a work around! Great work and thanks a lot 🙂
Hey man it works great on my PC but when i upload it to my site the control bar won’t show at all :/ It’s even on the same directory. I even tried to set permissions to execute both files in case that was the problem but nope. The flv loads perfectly except the control bar. Any ideas why?
make sure you upload SkinOverPlaySeekStop.swf (available in demo folder) as well to your same directory online.
Oh i noticed what the problem was… If i directly went to the video-player.swf url it would load perfectly fine. When it’s embed it’s the arcade script that i use. It asks for which .swf to load and probably it “ingores” the skinoverplayer.swf :(.. Would it be possible to join both in 1 so it could load just 1 swf?
i couldnt open the file
The fla is Flash CS4 version.
Hey,
I was playing around with the codes… what i realized is that the close button closes the video… the audio keeps streaming? am i doing something wrong?
Cheers,
rahul
Thanks for the guide. Is it possible to close from inside the skin. Perhaps call an external interface?
Place following code on button inside flash.
//for AS2 on (release) { getURL ("javascript:window.opener='x';window.close()" ); }It will close the browser window containing Flash movie. I hope this is what you meant.
Thanks for the reply,
Sorry for not being clear. I’m hoping to close/remove the container on the html side. I would love to call it a function on my js file. Is there a possibility for that?
For this, you can see my above reply for using Flow player.
a wonderful tutorial… i have a question though… is it possible to close a flv player completely on a page… after the video is done playing. suppose i wanna play a transparent video on top of html content… now what would happen once the video has ended?
If I have understood you correctly, you need an overlay solution for playing Flash Video in a popup window like this one.
Please note that what you want or need can’t be done inside just Flash, it requires js, html and css to work together.
Although Flow Player is a good option, you can also launch your own player using that javascript snippet, main point is that you close the pop-up window with js scripting, not from inside Flash.
A standalone version here of the above mentioned demo, just view its source and you will know what to do.