Using Flowplayer for Flash Video

Flowplayer is a powerful open source video player for Flash Video (FLV) files. It can be placed on the page and controlled via javascript. It is fully customisable and a great tool. The example below adds the player to your site, loads the video URL using href into the first DIV (this url could be a dynamic variable) then creates a player that loops continuously, autohides the controls, starts on mute, show volume, mute, play/pause and time scrubber bar:

FIRST, THE DIV TO PLACE THE VIDEO IN:

<div
href=”/VIDEO-URL”
style=”display:block;width:630px;height:355px;”
id=”player” wmode=”transparent”>
</div>

THEN THE JS CODE TO CONTROL IT, LOADING IN THE SWF PLAYER AS WELL…

<script language=”JavaScript”>
flowplayer(”player”, “/flowplayer-3.1.2.swf”,  {

plugins: {

controls:  {
backgroundColor: ‘transparent’,
all:false,
scrubber:false,
mute:true,
height:30,
autoHide: ‘always’,
play:true,
progressColor: ‘transparent’,
bufferColor: ‘transparent’,
scrubber:true,
volume:true
},

},
clip: {

// these two configuration variables does the trick
autoPlay: true,
wmode: “transparent”,
onStart: function() {$f().mute();},
onFinish: function () { this.play(); } ,
onBeforeFinish: function() {
// loop to the first clip
this.play(0);
// return false so that the player will not do anything it
// normally does with this event
return false; } ,
autoBuffering: true // <- do not place a comma here
}

});

</script>

Flowplayer is available from http://flowplayer.org/