How to build an AS3 Videoplayer Class

I recently worked on a project that needed a video player. I didn’t want to use the standard one’s included with Flash, so I did a little searching and found The Tech Labs, a tutorial site. Rafael Nünlist wrote an excellent post there called “How to build a AS3 Videoplayer.” He not only has a nicely designed video player, but he also shared the code for the world to see. Rafael wrote most of the code in the video player I’m going to show you.

The Flash movie can't be displayed on your device.

What's the deal? If you're reading SuperGeekery, you know your way around a Flash plugin. You've probably got Flash turned off, uninstalled, or maybe you don't have JavaScript turned on. Whatever the case may be, you can see the Flash movie. Go jump on a computer with those things and we're in business again.

I decided his video player looked perfect for my project, but I needed the video player as a class, not ActionScript on the timeline of my main movie. (I noticed Jake Rutter posted a comment on The Tech Labs asking for a class of the same thing.) In the same spirit that Rafael shared his creation with the everyone, I wanted to do the same with my iteration of his project.

I’ve made a few modifications to Rafael’s original code that I want to point out.

Since the video player is now a class, you need the ability to know it’s fully loaded before you give it a video to play. If you didn’t wait for it to be ready, you’d get an error when you gave it a video URL to try to play. It now broadcasts an event when it’s ready called SGLoadEvent.LOADED.

In making it a class, I hard coded the location of the graphics to a folder called “library” in the same directory as your SWF. While doing this, I put some of the controls for the videoplay in movieclip containers. There were a few references to their pixel positions in the script and I updated those to be pulled dynamically from the graphics in hopes that it makes it easier to edit how it looks. There are references to these new movieclips in the Action Script as well.

I’ve also used the popular GreenSock Tweens to have the video fade up for .25 seconds at the start of play and fade out for .5 seconds when a video ends.

Lastly, I gave the loadVideo function an extra parameter that allows you to choose whether you want to autoplay the video once it’s loaded.

How do you make it work?

I’ve made a zipped archive of the all the classes you’ll need plus the FLAs and SWFs for you to check out.

Here’s all the code you need to make it work:

import SGVideoPlayer;
import SGLoadEvent;
var videoPlayer:SGVideoPlayer = new SGVideoPlayer();

var fullsizePath:String="videofiles/EllenFeiss.flv";

videoPlayer.addEventListener(SGLoadEvent.LOADED, playerReady);

function playerReady(e:SGLoadEvent) {
 // be sure to remove your LOADED event listener otherwise your videoplayer will continue to issue the Play command making your Stop button not fuction properly
 videoPlayer.removeEventListener(SGLoadEvent.LOADED, playerReady);
 addChild(videoPlayer);
 // to autoplay the video change the 'false' to 'true'
 videoPlayer.loadVideo(fullsizePath, false);
 centerMyVideo(videoPlayer);
}

You’ll see I snuck in a call to centerMyVideo(). That uses a couple extra functions in the class that return the heigh and width of your video player.

Here’s that function:

function centerMyVideo(yourVideoPlayer:SGVideoPlayer) {
 var vpWidth:Number=yourVideoPlayer.getWidth();
 var vpHeight:Number=yourVideoPlayer.getHeight();

 var stWidth:Number=stage.stageWidth;
 var stHeight:Number=stage.stageHeight;

 trace("vpWidth: ", vpWidth);

 yourVideoPlayer.x = (stWidth - vpWidth)/2;
 yourVideoPlayer.y = (stHeight - vpHeight)/2;
}

Download ZIP of Class and example files.

Comments on this post.

It’s amazing what you did here! although you went too far off the grid of complicated from Raphael initial work. I liked it but it took a while to descpiher and get rid of the dynamic uploading. Thanks!!

By Gabriel Neila on May 25 2011

Do this stuff is all a process for me. If I were making this again today, I hope I’d be much more efficient. (I’ve recently done 2 projects where I used the FLVPlayback component. I still wanted more control, but time wasn’t on my side.)

I hope the video player helped you out. Thanks for the comment.

By John Morton on May 25 2011

Any idea how to add a full-screen button?

By MJG on Jun 20 2011

Hi MJG,

When I build this, I didn’t have that need so I didn’t make it work that way.

I saw this on Adobe’s site though and it might help you out:

http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html

By John Morton on Jun 21 2011

Very nice additions John. It’s nice to have it in OOP for a more convenient reuse on further projects.

MJG, I you are also welcome to read the other article with some more additions. You can find it on the techlabs or you can follow the link: goo.gl/6CNV0

By Rafael Nünlist on Aug 08 2011

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.
Truman.