How to Put More Than One FLV Player on a Web Page

Web authors often use third-party FLV players to embed Flash movies and presentations in their pages. These players offer helpful, easy-to-use controls that allow users to start and stop a presentation, skip from one part to another, adjust the volume and view the presentation in a full-screen mode. Adding more than one FLV player to a page is not difficult, but it requires careful attention to a few details in the HTML code.

Instructions

1. Open the HTML of your web page. If you use a text-editing program, simply open your page in the program and locate the line of code where your first video will be embedded. If you use a visual editing program such as Adobe Dreamweaver or Microsoft FrontPage, open your page, click on the area where your first video will be embedded, then change to Code View to see the HTML for your page.

2. Add the first video to your page. This example is based on the use of LongTail Video's JW Flash Player, but the method holds for similar players: one or more <div> tags wrap around the JavaScript that controls the attributes of the player. Copy and paste the following code into your HTML where the first video should appear:<br /><br /><div id=\"video1\"><br /><script type='text/javascript' src='swfobject.js'></script><br /><div id=\"mediaspace1\">Video number one</div><br /><script type='text/javascript'><br />var so = new SWFObject('player.swf','mpl','800','600','9')<br />GO<br />so.addParam('allowfullscreen','true')<br />GO<br />so.addParam('allowscriptaccess','always')<br />GO<br />so.addParam('wmode','opaque')<br />GO<br />so.addVariable('file','video1.flv')<br />GO<br />so.write('mediaspace')<br />GO<br /></script><br /></div><br /></div>

3. Add the second video to your page. Copy and paste the code below into your HTML where the second video should appear:<br /><br /><div id=\"video2\"><br /><script type='text/javascript' src='swfobject.js'></script><br /><div id=\"mediaspace2\">Video number two</div><br /><script type='text/javascript'><br />var so = new SWFObject('player.swf','mpl','800','600','9')<br />GO<br />so.addParam('allowfullscreen','true')<br />GO<br />so.addParam('allowscriptaccess','always')<br />GO<br />so.addParam('wmode','opaque')<br />GO<br />so.addVariable('file','video2.flv')<br />GO<br />so.write('mediaspace')<br />GO<br /></script><br /></div><br /></div><br /><br />This code is nearly identical the code used in the previous step, but three key changes allow the use of more than one player on a page. Because cascading style sheets only allow one <div> ID use per page, the ID on the first line was changed from \"video1\" to \"video2.\" Similarly, \"mediaspace1\" becomes \"mediaspace2\" on line three. Finally, the location of the Flash file is updated, from \"video1.flv\" to \"video2.flv\" on line nine.

4. Save and preview your page. Save the web page you just edited, and then open it in your web browser. More than one FLV player now appears on your page.

References

• LongTail Video: JW Player Setup Wizard
• LongTail Video: JW Player Flashvars