We had the pleasure of working with Adobe to architect and develop the FAVideo component that Kevin Lynch demoed at AJAXExperience, and which was just released in beta form on the Adobe labs site. It was an interesting project, building a Javascript object that acted as a facade for an embedded Flash video player, and using external interface to communicate between them. The intent is to provide a simple interface for AJAX / Web2.0 developers to embed, control, and play video back in their applications. As such, it has a really robust API for controlling video playback, but it also provides a really simple way for anyone to quickly inject video into their HTML content.
<script language="javascript"> // simple usage: var myVideo = new FAVideo("myDiv", "myVideo.flv"); // or a little more customized: var opts = {skinPath:"SteelOverAll.swf", autoLoad:false, previewImagePath:"preview.jpg"}; var myVideo = new FAVideo("myDiv", "myVideo.flv", 320, 240, opts); </script>
We had to write some interesting logic to deal with delaying method calls while the player SWF loads, as well as writing a custom event model for subscribing to events like cuePoint, progress, and playheadUpdate in Javascript. We also included support for using any Flash 8 video player skin, youtube-style preview images, built-in Flash player detection, and a ton more. Building the Javascript portion of this component was a somewhat nostalgic experience for me, hacking out classes using prototypes. Made me even happier about AS2 & 3.
The trickiest part of the whole thing was getting it to work properly in Internet Explorer. Apparently there's a series of nasty issues with IE, Flash player, divs and innerHTML – but that's a topic for another post.
FAVideo is released under a BSD license, so it can be used for commercial projects. You can download the full source on Adobe Labs. Thanks to everyone at Adobe that tested and provided feedback on the component!
Comments (12)
Wasn't there already an aflax module (http://www.aflax.org/) for this kind of job ?
Posted by: erixtekila at July 31, 2007 02:05 AMAnyhow, very usefull.
URL: http://www.v-i-a.net
This is a great step forward. There a bunch of variations out there but it's nice to get something from Adobe.
Is there any change for captioning support or seeking from the HTML controls in the future?
For something more sophisticated see http://www.jeroenwijering.com/?item=JW_FLV_Player
Posted by: Tom H at July 31, 2007 05:56 AMURL:
On the Adobe Labs wiki it says:
The FAVideo component is useful [when] You need a compact video playback solution. The FAVideo component is only 15k and leverages the widely distributed Flash Player which is about 1 megabyte.Does the player work with Flash Lite? If not are there any plans to adapt it so that it could? Would that be easy, feasible, or very tricky?
TIA
Posted by: Pete Ferne at July 31, 2007 06:24 AMURL: http://petef.org/wp/
I am trying to use this component, specifically the event handling for CuePoints, my problem is the cue points are fired off just fine, but the data returned with the cuepoints is never the data expected. I am trying to allow for optional captioning of these videos.
I then tried to open the ".fla" and try to find where the problem occurs, but the .fla tells my Flash 8 Pro, and Flash MX 2004 Pro that the file format is an unknown type.
I was also wondering if there is a way to pass the parameters to flash in an embed command as well to allow for users to take a snippet of the code and place it on their websites as well.
Thank you,
Posted by: Michael Schmidt at September 7, 2007 11:23 AMMichael Schmidt
URL: http://www.justplainfishermen.com
Ok Solved my own problems now I knwo it is a CS3 file.
For CuePoints I added a duplicate function to duplicate the Object before sending it to sendEvent it works.
New Code:
static var refCount;
private function duplicate(cuePoint:Object):Object
{
var obj:Object = new Object();
if ( refCount == undefined)
{
refCount = 0;
}
refCount++;
if ( refCount > 4 )
{
refCount--;
return;
}
for ( var prop in cuePoint)
{
if ( typeof(cuePoint[prop]) != "object" )
{
obj[prop] = cuePoint[prop];
} else {
obj[prop] = duplicate(cuePoint[prop]);
}
}
refCount--;
return obj;
}
changed code
private function onNetStreamCuePoint(cuePoint:Object):Void {
Posted by: Michael Schmidt at September 7, 2007 02:51 PMsendEvent('cuePoint', duplicate(cuePoint));
}
URL: http://www.justplainfishermen.com
Very Nice Job! congrats!
But it is not possible to have it ready for AS3?? For example, if you want to have the full screen mode.
Posted by: Manu at September 28, 2007 03:18 PMURL:
The skinVisible property doesn't seem to work. I always have controls over my video, except whenautohidden. Is there some way to work around this problem and get rid of the controls? This is a killer problem for my application.
Posted by: Mark Hahn at October 29, 2007 01:32 PMURL: http://elleh.com
Mark:
Are you using player.setSkinVisible(false)? It's working in my local test case.
Posted by: Wes Gorgichuk at October 29, 2007 04:04 PMURL: http://gskinner.com
Thanks for the great component!
It looks like zip is missing includes/ folder.
Are you planning to add more features like playlists, etc.? What is the plan and where to check for updates?
Posted by: ab at November 2, 2007 04:48 PMURL:
Hey first off what a great player !!!!
Am having some problems getting it to work though
I'va manage to reskin the player ok with after a few problems.
I'm now trying to intergrate it into a video gallery
I want to be able to load in a video when a thumbnail is clicked.
I've managed to get it to work using the suppled APITest but am having problems getting it to work.
Its not to well documented :(
I'd like a little function that sets the width, Height and skin and makes the FAvideo autoplay
or even just a pointer as to how to set the skin when the player gets initialized...
I've got it as far as loading in the right video but am going round in circles trying to set the other options :(
http://rhp.base5.co.uk/FAVideo/VidGallery.php
Thats the page i am working on any help would be greatly appreciated or even a link where i can find fuller instructions
Posted by: Dizzy High at December 7, 2007 10:04 PMAm not the best at javascript and my head is hurting
thanks in advance
URL: http://www,base5designs.co.uk
Its working !!! http://rhp.base5.co.uk/FAVideo/gallery4.php
I have thumbnails which link to my diferent videos when a thumbnail is clicked it should load in the correct video start playing and set the dimensions of the player
I've written the following function to perform this task...
function play(p_player, p_url, p_w, p_h) {
p_player.setSize(p_w, p_h);
p_player.setVideoScaleMode("maintainAspectRatio");
p_player.play(p_url);
isPlaying = true;
}
But to get the video to stretch to the correct size i have to click the thumbnail twice and i do not understand why?
Posted by: Dizzy High at December 13, 2007 11:13 AMDo i have to refresh the player in some way and if so how?
Also is there a forum for FAVideo????
URL: http://www.base5designs.co.uk
How to play the .swf file?
Posted by: srinivas at May 10, 2008 04:48 AMURL: