Hi All

This is a beginers guide to add one or more 'video' flash (.flv) player/s to your web site. It's for someone like me who

knows no html or javascript. There are so many different types & 'styles' of code for this that it can be so confusing so I

thought I would post the exact code that worked for me, at least you could use it as a starting point.

This code uses the popular FREE JW FLV Player This is very

configurable so you can set it up to suit you.

There are 2 types of code 'imbed' code which is generally for sites such as 'youtube' and swfobject code that is more

suitable for 'noraml' websites which we shall use here.


I will give examples of 1) 1 Player Basic 2) Multiple players Basic 3) Multiple players using 'onload' 4) Advanced Multiple

players using 'onload'

In the examples I will use 'myvideo.flv' as the video name and 'splash.jpg' as the name for a splash/start image to the video

(you don't have to use one) Also the video is 200x240 pixels in size.


Firstly there are 3/4 files that are required to be uploaded to your server 1)swfobject.js 2)flvplayer.swf 3)your video clip

and 4)Splash image (?)

Example 1

<script type="text/javascript" src="swfobject.js"></script>
<div id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript">
var s1 = new SWFObject("flvplayer.swf","single","200","240","7");
s1.addParam("wmode","opaque");
s1.addVariable("file","myvideo.flv");
s1.addVariable("image","splash.jpg");
s1.addVariable('width', '200');
s1.addVariable('height', '240');
s1.addVariable("frontcolor","0xBEC7CE");
s1.addVariable("backcolor","0x402A15");
s1.addVariable("lightcolor","0xCC0000");
s1.addVariable("showdigits","false");
s1.addVariable("showicons","false");
s1.addVariable("autostart","false");
s1.addVariable("usefullscreen","false");
s1.addVariable("showicons","false");
s1.write("player1");
</script>

This is meant to go into the 'head' section, but if like me you use WD you can only do that if you edit the html file

afterwards, just add the code via the 'code' button and put it where you want, ok it's the WRONG way to do it but it works

;-)

The 'addvariables' are called 'Falshvars' and are the video player options. These are the ones I use but there are many more

options listed on the mentioned link.

Please NOTE.. this code does NOT work in preview mode ! All you will see is an install flash 'error' message.


Example 2

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("flvplayer.swf","single","200","240","7");
s1.addParam("wmode","opaque");
s1.addVariable("file","myvideo.flv");
s1.addVariable("image","splash.jpg");
s1.addVariable('width', '200');
s1.addVariable('height', '240');
s1.addVariable("frontcolor","0xBEC7CE");
s1.addVariable("backcolor","0x402A15");
s1.addVariable("lightcolor","0xCC0000");
s1.addVariable("showdigits","false");
s1.addVariable("showicons","false");
s1.addVariable("autostart","false");
s1.addVariable("usefullscreen","false");
s1.addVariable("showicons","false");
s1.write("player1");

var s2 = new SWFObject("flvplayer.swf","single","200","240","7");
s2.addParam("wmode","opaque");
s2.addVariable("file","myvideo2.flv");
s2.addVariable("image","splash2.jpg");
s1.addVariable('width', '200');
s1.addVariable('height', '240');
s2.addVariable("frontcolor","0xBEC7CE");
s2.addVariable("backcolor","0x402A15");
s2.addVariable("lightcolor","0xCC0000");
s2.addVariable("showdigits","false");
s2.addVariable("showicons","false");
s2.addVariable("autostart","false");
s2.addVariable("usefullscreen","false");
s2.addVariable("showicons","false");
s2.write("player2");


<div id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<div id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>


These are the code 'objects' to positon the two players, just add each one via the code button and place where you want your

players.
As you can see for the above code for more that one player just add 1 to the 's' and obviously to 'player'


Example 3

In Internet explorer I suffered from one of the video players intermitently not loading (Ok in ff) this is a known 'problem'

If you get this (You may not) then you can use the 'onload'code below. Basically it ensures your whole website is loaded

prior to the video players loading so that there are no 'conflicts'.

<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
function createPlayer1()
{
var s1 = new SWFObject('flvplayer.swf', 'single', '200', '240', '7');
s1.addParam('wmode', 'opaque');
s1.addVariable('width', '200');
s1.addVariable('height', '240');
s1.addVariable('file', 'myvideo.flv');
s1.addVariable('image', 'splash.jpg');
s1.addVariable('frontcolor', '0xBEC7CE');
s1.addVariable('backcolor', '0x402A15');
s1.addVariable('lightcolor', '0xCC0000');
s1.addVariable('showdigits', 'false');
s1.addVariable('showicons', 'false');
s1.addVariable('autostart', 'false');
s1.addVariable('usefullscreen', 'false');
s1.addVariable('showicons', 'false');
s1.write('player1');
};

function createPlayer2()
{
var s2 = new SWFObject('flvplayer.swf', 'single', '200', '240', '7');
s2.addParam('wmode', 'opaque');
s2.addVariable('width', '200');
s2.addVariable('height', '240');
s2.addVariable('file', 'myvideo2.flv');
s2.addVariable('image', 'splash2.jpg');
s2.addVariable('frontcolor', '0xBEC7CE');
s2.addVariable('backcolor', '0x402A15');
s2.addVariable('lightcolor', '0xCC0000');
s2.addVariable('showdigits', 'false');
s2.addVariable('showicons', 'false');
s2.addVariable('autostart', 'false');
s2.addVariable('usefullscreen', 'false');
s2.addVariable('showicons', 'false');
s2.write('player2');
};

function loadPlayers()
{
createPlayer1();
createPlayer2();
createPlayer3();
};

Again above code should be in the <head>...</head> section

Add this code to your 'body' section...onload="loadPlayers();"


<body bgcolor="#000000" alink="#ff0000" link="#0000ff" vlink="#800080" onload="loadPlayers();">

This goes into the body section of your html.
This is an example of my 'body' code so you can see how it should look, you will have to alter this yourself if you use wd.

<div id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<div id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>

And again the position code.


Example 4

This is a more advanced code for 3 players using the onload code mentioned above.

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

function createplayer(theFile, theImage, thePlayer) {
var s0 = new SWFObject("flvplayer.swf","single","200","240","7");
s0.addParam("wmode","opaque");
s0.addVariable("file",theFile);
s0.addVariable("image",theImage);
s0.addVariable('width', '200');
s0.addVariable('height', '240');
s0.addVariable("frontcolor","0xBEC7CE");
s0.addVariable("backcolor","0x402A15");
s0.addVariable("lightcolor","0xCC0000");
s0.addVariable("showdigits","false");
s0.addVariable("showicons","false");
s0.addVariable("autostart","false");
s0.addVariable("usefullscreen","false");
s0.addVariable("showicons","false");
s0.write(thePlayer);
}

function init() {
createplayer("myvideo.flv", "splash.jpg", "player1");
createplayer("myvideo2.flv", "splash2.jpg", "player2");
createplayer("myvideo3.flv", "splash3.jpg", "player3");
}
</script>

Again put in the head section.

Add this tour 'body' section ...onload="init()"

How it looks in mine as an example...
<body onload="init()" bgcolor="#000000" alink="#ff0000" link="#0000ff" vlink="#800080" >

<div id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>

<div id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>

<div id="player3"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>

The 3 seperate postion code objects for your players.

I the above may be of some help to someone and I haven't made any 'goof ups' ! There is alot of information and help on the

above link so give it a try :-)

Remember you dont Have to use the above code, it's just what worked for me !

Regards
Andy