AS3: Dynamic Resizing Video Player with Optional XML Playlist

View Preview
Buy on FlashDen

This is my first FlashDen file. For the sake of brevity (for me to write, at least), I will just post the description that I had written for the file originally here.

This video player is a little different than standard video players and allows you more control over what you can do with it. The two example files show the video player as playing a single video (player-single.fla) and when you want to use a playlist (player-playlist.fla).

The provided MainSingle.as and MainPlaylist.as files are a jumping off point for the player. The single version shows how to play a single video inside of the player while the playlist version shows how to set up an XML playlist, add listeners for the playlist, set up a video player, and add a resize listener for the video player to move the playlist around when resized.

KEY FEATURES
1. Dynamic Resizing The video player will account for the video’s width and height properties and resize itself and the controls based on the size of the video proportionally.

2. File Formats The player can play all formats supported by the latest version of the Flash Player, including .flv, .f4v, .mov (H.264), and .mp4 (H.264).

3. Easy Controls Setup You can easily remove/add the controls you would like to use by simply guiding/un-guiding them out in the provided FLA file. The code is smart enough to know what controls are present and which aren’t and reacts accordingly without throwing nasty errors.

4. Skinning The player was made to be as easy to skin as possible. You can go in and just change the colors/sizes of the MovieClips in the controls to suit you in any way you’d like. Of course there are small restrictions to this as all of the functionality of the controls is dependent on the clips themselves (if you use the provided VideoControls.as file as is) but for the most part you can re-skin and resize them any way you’d like.

5. XML Playlist The player can be set up to play one video (play videos based on user clicks) or it can play a playlist that comes from an XML file. If you pass a VideoPlaylist in the constructor of the VideoPlayer, the player will automatically play the next video in line upon completion of the first one.

6. Playlist Integration As is, the player is set to create an XML playlist and integrate the provided Playlist.as file and its functionality. This means that you can use the buttons to navigate through clips to play as well as the previous/next navigational buttons and all aspects of the player will react accordingly. The playlist will also move into the proper position upon resize of the player when a video is played that is a different size than the initial video selected. These can also be re-skinned as you like.

7. UI Editing All class files provided are editable to control the UI’s look and feel in the manner that you wish. This is only suggested for more experienced developers.

8. Documentation The core files are documented and HTML documentation is provided so that you can see what methods can be executed on each of the classes.

9. Extending You can use the video player as is or if you are more experienced you can build your own using the base classes as a starting point. Integrating your UI from there is entirely up to you and the VideoDisplay class provides you with methods to run that will get you started on the right path.

10. Full Screen Functionality The controls allow you to go info full screen mode and they resize accordingly so that you can control the player even when in this mode. Everything is a vector based object so nothing gets pixelated or resizes improperly.

INTEGRATED CONTROLS

ENCODING FILES
For your videos to play properly and deploy the appropriate metadata, it is suggested to encode using the Flash CS3 Video Encoder or the Adobe Media Encoder CS4 . You can encode the videos using other software but you have to make sure that the headers of the file will be encoded at the beginning of the file. You can use a third party tool called QTFastStart to do this. For more information on playing videos in the Flash Player, please see Tinic Uro’s excellent explanation.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

9 Comments

Very nice work.

thank you, sir.

Nice player, I like the smooth overall feel. So the fullscreen bug people are complaining about occurs when you return to normal mode on a different video from when you entered fullscreen mode. It’s not the end of the world.

Wonderful player!

dzienkuje, FLOV 😛

@Marco: Thanks alot for tracking that for me. I didn’t realize that was the issue. I will look into it when I get a chance. Many thanks.

nice player thx a lot!

I love this player
Is it possible to give the standard-mode player a set width and height, rather then using the video’s size? For example, I encode my videos as 1000×562 so they look better in fullscreen mode. But in standard mode, 1000px wide is too large for users with smaller screen resolutions. I want the standard mode to be something like 800px wide, so it downscales the videos to fit.
Any suggestions? I see all the .as files included, but Im a novice.

@Scott: I replied on the FlashDen page.

Leave a comment

(required)

(required)