Dynamic Resizing Video Player with Optional XML Playlist

UPDATED 11 /5/09: Fixed the issue with videos ending before their actual end time.

UPDATED 4 /30/09: Fixed fullscreen bug where you would go fullscreen on one video in the playlist, then the video would switch to the next, and when you came back from fullscreen on the new video it was being resized the wrong way.

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

• Play/Pause
• Play Progress
• Play Progress Slider
• Load Progress
• Mute Toggle
• Volume Slider
• Full Screen Toggle

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 (http://www.entropy.ch/software/macosx/#qtfaststart) to do this. For more information on playing videos in the Flash Player, please see Tinic Uro’s excellent explanation (http://www.kaourantin.net/2007/08/what-just-happened-to-video-on-web_20.html).