Flash Video Players

vhs

We took a look at how to get videos to play in flash in the post called Flash Video on the Web. However this post has resources for when you need more complex video playback features such as playlists, volume control, and customized interfaces.

Simple Example:

Here is a video player using flash’s built in FLVPlayback component. When each of the three buttons are pressed the source path of the FLVPlayback component is changed. Here is a copy of the code which sits on the first keyframe of an as3 fla:

b_1.addEventListener(MouseEvent.MOUSE_DOWN, onClickB_1);
b_2.addEventListener(MouseEvent.MOUSE_DOWN, onClickB_2);
b_3.addEventListener(MouseEvent.MOUSE_DOWN, onClickB_3);
 
function onClickB_1(myEvent:MouseEvent){
	videoPlayer.source = "video1.flv";
}
 
function onClickB_2(myEvent:MouseEvent){
	videoPlayer.source = "video2.flv";
}
 
function onClickB_3(myEvent:MouseEvent){
	videoPlayer.source = "video3.flv";
}
 
videoPlayer.skin = "http://flashart.ca/wp-content/uploads/2009/04/SkinUnderPlaySeekFullscreen.swf";

* The last line there is to compensate for a firefox bug which makes your video controls go invisible. To fix the issue this line of code reapplies the controls “skin” at runtime.

The Flash plugin is required to view this object.

Download .fla source (*note that for this to work you will need your own flv files to sit in the same directory as your flash file.)

Resources and Examples:

As3 Video Player Tutorials Roundup

Adobe Flash Video Gallery (w/ source!)

Custom Video Player Skinning Tutorial

The following are open source flash video players which are intended for embedding into HTML rather integrating into a flash file. Knowledge of HTML will be necessary in order to setup these players:

Flow Player

JW FLV Player

This entry was posted in Demos w/ Source, Resources and tagged , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*