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 lang="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!
FAVideo Released: Flash Video for JavaScript / AJAX
Wasn’t there already an aflax module (http://www.aflax.org/) for this kind of job ?
Anyhow, very usefull.
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
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
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,
Michael Schmidt
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 {
sendEvent(‘cuePoint’, duplicate(cuePoint));
}
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.
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.
Mark:
Are you using player.setSkinVisible(false)? It’s working in my local test case.
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?
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
Am not the best at javascript and my head is hurting
thanks in advance
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?
Do i have to refresh the player in some way and if so how?
Also is there a forum for FAVideo????
How to play the .swf file?
FaVideo is n’t working with IE(in firefox it’s working) when i am putting this asp.net webform.If I am using with html page it’s working .Can Any one plz help me ?
@Chaitanya
Unfortunately, this is an inherent problem with ExternalInterface and ASP.net forms, and a known bug. There isn’t an easy solution I am aware of.
I was having trouble getting the .setSkinAutoHide() method or the .setSkinVisible() method to work.
So, I added a little delay before calling these (assuming that perhaps everything wasn’t loaded yet, and it wasn’t ready for them) and it worked.
What I did was basically…
function setSkinAutoHide(p_player, p_autoHide) {
p_player.setSkinAutoHide(p_autoHide);
}
function setSkinVisible(p_player, p_vis) {
p_player.setSkinVisible(p_vis);
}
function hideit()
{
setSkinAutoHide(playerOne, true);
setSkinVisible(playerOne, false);
}
setTimeout(“hideit()”, 2000);
(Note here my FAVideo object is called “playerOne”.)
@Lanny, Chaitanya – there is a solution for the ExternalInterface and .Net forms: [http://www.psyked.co.uk/adobe/flash/flashjavascript-problems-in-a-net-content-managed-website.htm] to fix this for FAVideo, you need to make a one-line change.
FAVideo.js – line 544(ish)
Change:
if (navigator.appName.indexOf(“Microsoft”) != -1) {
return window[id]
} else {
To:
if (navigator.appName.indexOf(“Microsoft”) != -1) {
window[id] = document.getElementById(id);
return window[id]
} else {
First, let me say I have been trying to come up with this solution for awhile. What you guys have here is great! It does evrything I want except closed captioning. Is there a way to incorparate xml file based closed captioning with a CC button using this component? I’m using flash CS4.
Have a great day!