I have mentioned the free open source flash video player FlowPlayer before in my post about adding cuepoints and create flash videos. It is a great free flash video player that you can modify yourself. After writing about adding metadata to your flash videos I decided to add support for calling javascript from FlowPlayer one cue events. The first step to modifying the FlowPlayer source is to be able to build FlowPlayer from source.

FlowPlayer is created using a number of different open source Flash tools. Here is a list of the tools you will need:

• Ant – This is used to build the source. It along with a few of the other packages require java to run.
• AS2Ant – An AS2Lib build tool.
• AS2Lib – An ActionScript 2.0 application framework.
• SWFMill – Creates SWF files from XML definitions.
• MTASC – An open source Actionscript compiler.
• luminicbox.log – A logging framework for Actionscript.

If you want to find out more about these tools you can use osflash.org as a great open source flash resource.

Now that you know what you need it is time to get the source. You can either check it out from the FlowPlayer CVS repo or download the FlowPlayer source distribution.

The following shows how I went about gather all the tools and source for the build. I assume here that you have java already installed.

cd /tmp/
mkdir flowplayer
cd flowplayer

wget http://apache.mirrors.tds.net/ant/binaries/apache-ant-1.7.0-bin.tar.gz
tar xvzf apache-ant-1.7.0-bin.tar.gz
export ANT_HOME=/tmp/flowplayer/apache-ant-1.7.0/

mkdir aux
cd aux

wget http://umn.dl.sourceforge.net/sourceforge/as2lib/as2ant_2.2.zip
mkdir as2ant
cd as2ant
unzip ../as2ant_2.2.zip
cd ..

wget http://umn.dl.sourceforge.net/sourceforge/as2lib/as2lib_0.9.3_with_dependencies.zip
mkdir as2lib
cd as2lib
unzip ../as2lib_0.9.3_with_dependencies.zip
cd ..

wget http://swfmill.org/releases/swfmill-0.2.11.tar.gz
tar xvzf swfmill-0.2.11.tar.gz
cd swfmill-0.2.11
./configure
make
cd ..

wget http://www.mtasc.org/zip/mtasc-1.12-linux.tgz
mkdir mtasc
cd mtasc
tar xvzf ../mtasc-1.12-linux.tgz
sed -i '/function onStatus/ i\  function onCuePoint(info:Object):Void;' std/NetStream.as
cd ..

wget http://www.luminicbox.com/dev/flash/log/luminicbox.log.zip
unzip luminicbox.log.zip

cd ..

cvs -d:pserver:anonymous@flowplayer.cvs.sourceforge.net:/cvsroot/flowplayer login
cvs -z3 -d:pserver:anonymous@flowplayer.cvs.sourceforge.net:/cvsroot/flowplayer co -P flowplayer

cd flowplayer

Now you have everything you need to build FlowPlayer and you are in the flowplayer source directory. The next step is to change the build.properties file to point to your build tools. If you have followed the above procedure here is a build.properties file that will work:

AS2ANT_LIB=../aux/as2ant/as2ant.jar
LUMINICBOX_DIR=../aux/LB.Log
AS2LIB_SRC_DIR=../aux/as2lib/src

// plug-in classes for as2lib unit test and asunit to be used with the unit test task
AS2ANT_UNITTEST_DIR=../aux/as2ant/flash
ASUNIT_DIR=../aux/asunit/as25
UNITTEST_FLASHPLAYER=

STD_LIB=../aux/mtasc/std
STD8_LIB=../aux/mtasc/std8
MTASC_BIN=../aux/mtasc/mtasc
SWFMILL_BIN=../aux/swfmill-0.2.11/src/swfmill

// Uncomment following if you want to copy the files to some dir after building
//DEPLOY_DIR=../flowplayer-web/video

After modifying the build.properties file you are ready to build.

/tmp/flowplayer/apache-ant-1.7.0/bin/ant

After the build is complete you will find FlowPlayer in the build directory ready to be used.

Now that you can build FlowPlayer lets modify it so a javascript function gets called when a cuepoint is hit. To do that you will need to edit the file:
src/actionscript/org/flowplayer/FLVController.as

Add the following to the import section:

import flash.external.ExternalInterface;

Now find the line in the same file that defines the cuePointCallback function, search for "function cuePointCallback" and add the following line after the function definition:

ExternalInterface.call("fpCuePoint", cuePointInfo.parameters.mydata);

The above assumes the parameter you want to pass to your function is called "mydata" in your cuepoint. You can then define the javascript function in the page and retreive the data as each cuepoint is hit.

function fpCuePoint(data)
{
  alert(data);
}

Tags: FlowPlayer, flash, flash video