I can't figure out how to get multiple videos to play on one page like Longtail shows on the top of this page:
http://www.longtailvideo.com/support/tutorials/JW-Player-Lightbox
I'm a newbie at JS and CSS so if anyone can help, please be pretty explicit.
I've tried to download all the necessary files and read through the forums but can't seem to find anything on this. Even the page that shows the example doesn't explain how to do it. The examples only seem to show one video.
Anyone can help?
Thanks so much for the reply Hobbs.
I will try to dive in and read the links you have provided. But at first glance, non of those seem to be using the JWBox feature where the screen dips to black and the player overlays on the whole page.
You can see a sample of the site I'm trying to build here:
http://stosmedia.com/sasha/testswfobj2.html
Again, I'm really new to the JS and CSS, but I've tried to copy and paste from the the JWBox page (http://www.longtailvideo.com/support/tutorials/JW-Player-Lightbox) and I think I've tried repeating the player code with unique names/ids, but perhaps I'm missing something?
Thanks again.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Christos - JW Box - JWMP v4.6.x - SWFObject v1.5</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.2');
</script>
<script src="swfobject.js"></script>
<script src="jquery.jwbox.js"></script>
<link rel="stylesheet" type="text/css" href="jwbox.css"/>
</head>
<body class="oneColElsCtr" onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?');">
<div id="container">
<div id="mainContent">
<h1>Sasha Salama</h1>
<p>
Sasha Salama is a veteran broadcast journalist with more than 20 years of experience in the U.S. and overseas. Ms. Salama has interviewed hundreds of CEOs and newsmakers as an anchor and correspondent for CNN, CNBC in the U.S. and Asia, Reuters, Nightly Business Report and Asia Business News. She also has coached CEOs and senior executives to prepare them for interviews with the press as well as presentations.
<br />
<br />
Ms. Salama currently is a Senior Producer at Reuters Television where she is helping launch an innovative, online financial news product aimed at professional and institutional investors. She anchored and reported financial news for CNN, CNN International and CNN Headline News for eleven years. As Managing Editor of CNBC Asia in Hong Kong, Ms. Salama hired and managed a newsroom of 75 people for the world?Äôs first, global business news television network. Prior to CNBC Asia, she helped launch Asia?Äôs first business news network, Asia Business News, from Singapore. Ms. Salama was also was a key member of the launch team of CNBC in the U.S., creating the network?Äôs first global business news program, first mutual fund program and first election coverage from a financial perspective. Prior to CNBC, Ms. Salama wrote for Charles Osgood when he anchored the ?ÄúCBS Morning News?Äù. She started her career in radio, anchoring and reporting in Providence, Rhode Island where she received two awards from the Associated Press for her documentary work and election night coverage.
<br />
<br />
Ms. Salama holds a Bachelor of Arts degree in History from Brown University and a Master of Science degree in Journalism from Columbia University. She lives in New York City with her husband and two children.
<br />
</p>
<div id="#jwbox_background">
</div>
<table width=600>
<tr>
<td>
<div class="jwbox">
<div style="position:absolute;color:red;font-size:18px;padding:50px;cursor:pointer;">
Click me!
</div>
<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="http://stosmedia.com/sasha/images/sashasalama_funnymonkey.jpg" />
<div class="jwbox_hidden">
<div class="jwbox_content">
<div id="player1">
</div>
</div>
</div>
</div>
</td>
<td>
<div class="jwbox" style="float:left">
<div style="position:absolute;color:red;font-size:18px;padding:50px;cursor:pointer;">
Click me!
</div>
<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="http://stosmedia.com/sasha/images/SS_finance.jpg" />
<div class="jwbox_hidden">
<div class="jwbox_content">
<div id="player2">
</div>
</div>
</div>
</div>
</td>
<td>
<div class="jwbox" style="float:left">
<div style="position:absolute;color:red;font-size:18px;padding:50px;cursor:pointer;">
Click me!
</div>
<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="http://stosmedia.com/sasha/images/SS_news.jpg" />
<div class="jwbox_hidden">
<div class="jwbox_content">
<div id="player3">
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var so = new SWFObject('player.swf', 'ply1', '320', '240', '9.0.124');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'http://stosmedia.com/sasha/videos/sashasalama_funnymonkey.flv');
so.addVariable('image', 'http://stosmedia.com/sasha/images/sashasalama_funnymonkey.jpg');
so.addVariable('controlbar', 'none');
so.write('player1');
</script>
<script type="text/javascript">
var so = new SWFObject('player.swf', 'ply2', '320', '240', '9.9.124');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'http://stosmedia.com/sasha/videos/SS_finance.flv');
so.addVariable('image', 'http://stosmedia.com/sasha/images/SS_finance.jpg');
so.addVariable('controlbar', 'none');
so.write('player2');
</script>
<script type="text/javascript">
var so = new SWFObject('player.swf', 'ply3', '320', '240', '9.0.124');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'http://stosmedia.com/sasha/videos/SS_news.flv');
so.addVariable('image', 'http://stosmedia.com/sasha/images/SS_news.jpg');
so.addVariable('controlbar', 'none');
so.write('player3');
</script>
</body>
</html>
Thanks!!! That worked.
I'll have to study this to understand what I was doing wrong.
And thanks for the links.
Will the code you've given me work for up to 15 videos? Do I understand that correctly?
You can add more players by repeating the table cell element <td> with a unique id for the div of "playern" where n=1,2,3...
And repeat the block of JavaScript with a unique player name/id of ply1, ply2, ply3... and write to the corresponding div with so.write('playern') where n=1,2,3...
Instantiating many players on one page will slow the page load and make the page response sluggish. I usually don't recommend more than about 5 players.
To have an unlimited number of players, there is a different technique that loads a placeholder image where each player will appear, then when the user clicks on the image, a single player is instantiated.
See this thread, starting Nov.7: http://www.longtailvideo.com/support/forum/Bug-Reports/20110/Server-Not-Found-Error-in-
I updated your Test Page to have 12 players, so you can see how it performs.
http://willswonders.myip.org:8074/Christos.html
Also, Firefox has a limit of 16 Flash-content elements.
I'm trying to put two seperate lightboxes on one page which are not near each other, ie they cannot be in the same table. I am using different IDs for the players but the lightboxes do not launch so I suspect there is a problem with the box code rather than the player.
Any pointers would be much appreciated!!
D
@David - Can you provide a link to where you are running this?
For 2~3 videos, you can just repeat the player code with unique names/ids for the attributes and the players.
For more than 2~3 videos, there are techniques posted on this Forum.
General: http://www.longtailvideo.com/jw/?search=multiple+players
A recent post: http://www.longtailvideo.com/support/forum/Bug-Reports/20110/Server-Not-Found-Error-in-#msg136763