Passionate Development From Journeyman to Master

First flash video (using ffmpeg flowplayer)

Following the instruction on Scott’s blog, I succeeded posting my first ever flash video. You can see it here: Jet’s video.

It took me about 2.5 hours to get everything working correctly. The first problem that I encountered was: Flowplayer didn’t display the flash video. It just gave me a blank screen. Below is the code snippet that I use:

<object type="application/x-shockwave-flash"
data="http://tjandrawibawa.org/flowplayer/FlowPlayer.swf"
width="480" height="383" id="FlowPlayer">
  <param name="allowScriptAccess" value="sameDomain"/>
  <param name="movie" value="http://tjandrawibawa.org/flowplayer/FlowPlayer.swf"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noScale"/>
  <param name="wmode" value="transparent"/>
  <param name="flashvars" value="baseURL=http://tjandrawibawa.org/flowplayer/movies/&videoFile=ade_jet1.flv
    &autoPlay=false&loop=false&autoBuffering=false
    &amp"/>
</object>

Not sure why the above doesn’t work. Luckily I poked around the Flowplayer directory and found the HTML file that comes with Flowplayer. I simply use the file and replace the URLs and it worked. Below is the HTML snippet that I use, I think the main difference between the two approaches is, below approach uses javascript to load the flash.

<script type="text/javascript" src="http://tjandrawibawa.org/flowplayer/swfobject.js"></script>
<div id="flowplayerholder">
	This will be replaced by the player.
</div>
<script type="text/javascript">
// <![CDATA[
var fo = new SWFObject("http://tjandrawibawa.org/flowplayer/FlowPlayer.swf", "FlowPlayer",
"468", "350", "7", "#ffffff", true);
// need this next line for local testing, it's optional if your swf is on the same domain as your html page
fo.addParam("allowScriptAccess", "always");
fo.addParam("loop", false);
fo.addVariable("config", "{ playList: [ {overlayId: 'play' },
{ url: 'http://tjandrawibawa.org/movies/ade_jet1.flv' } ], initialScale: 'scale' }");
fo.write("flowplayerholder");
// ]]>
</script>


Update: Dumped the HTML code produced by the Javascript function in the swfobject.js and this is the HTML code produced:

<embed type="application/x-shockwave-flash" src="http://tjandrawibawa.org/flowplayer/FlowPlayer.swf" width="468" height="350"
id="FlowPlayer" allowScriptAccess="always" loop="false" flashvars="config={playList:[{overlayId:'play'},{url:'http://tjandrawibawa.org/movies/jet_teeth.flv'}],initialScale:'scale'}"/>

The other hurdle that I encountered was no sound on the flash file produced by FFmpeg. The source video that I have is a .MOV (Apple’s Quicktime?) file. For .MOV files, it turns out that I have to specifically tells FFmpeg to specify MP3 as the output audio codec for the output. On my FFmpeg installation, mp3 is not installed, so I have to re-compile FFmpeg. Found out how to do it from: http://ubuntuforums.org/showthread.php?p=651946.

And finally this is how I execute FFmpeg to produce the desired flash video:

ffmpeg -i DSCN2062.MOV -s 320x240 -r 15 -b 250 -acodec mp3 -ar 44100 -ab 48 -y ade_jet1.flv

general