I have an issue with a webpage I am setting up.
I'm trying to put two .FLV files that have the .jpg preview function onto the same page using FLVPlayer.
If I view the page in Firefox, it works great - no issues. However, if I view the page with IE 7, only one of the video clips appear and it happens to be in the stop where the other one should be. It's very bizarre.
I am using the SWFObject Embed code generated from the "Setup Wizard" page.
Ok, for example. I created a very basic page with a table that has 3 rows and 3 columns. To prove that this happens no matter what .FLV file I am using, I used the video clip and code that is generated using the FLV Player Setup Wizard. I put two instances of the player on the page. Using Firefox 2.0.0.12, the page loads as expected and you can see and play both instances of the video clip. Inside of Internet Explorer 7, only the top video plays - the bottom video isn't visible.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td> </td>
<td><script type="text/javascript" src="http://www.jeroenwijering.com/embed/swfobject.js"></script>
<div id="player">TEST</div>
<script type="text/javascript">
var so = new SWFObject('http://www.jeroenwijering.com/embed/mediaplayer.swf','mpl','300','220','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('width','300');
so.addVariable('height','220');
so.addVariable('file','/upload/spotajob.flv');
so.addVariable('image','/upload/spotajob.jpg');
so.addVariable('displayheight','220');
so.write('player');
</script></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><script type="text/javascript" src="http://www.jeroenwijering.com/embed/swfobject.js"></script>
<div id="player">TEST2</div>
<script type="text/javascript">
var so = new SWFObject('http://www.jeroenwijering.com/embed/mediaplayer.swf','mpl','300','220','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('width','300');
so.addVariable('height','220');
so.addVariable('file','/upload/spotajob.flv');
so.addVariable('image','/upload/spotajob.jpg');
so.addVariable('displayheight','220');
so.write('player');
</script></td>
<td> </td>
</tr>
</table>
</body>
</html>
Nevermind - I figured it out. perhaps this will help someone else.
You have to make sure that you have a unique "div id" for each instance of the player. I changed the second Player's ID to "player2" and then changed the last "so.write('player') to so.write('player2') and it worked fine in IE7 AND Firefox.
Sorry for being such a n00b.
You also need to use a unique name/id/javascriptid for each player. 'mpl' for all will bring you much grief if you attempt to use the JavaScript API.
Thanks for the tips. This was driving me crazy.
streamBabie, you said
"You also need to use a unique name/id/javascriptid for each player. 'mpl' for all will bring you much grief if you attempt to use the JavaScript API."
Could you spell that out for me?
Apart from changing the line
so = new SWFObject('mediaplayer.swf','mpl','404','303','8');
to mp2, mp3 etc,
What else should I be changing?
I'm a video editor rather than a programmer - hence the stupid questions! I apologise, and am grateful for everyone's help.
First block of script:
<td align="center" valign="top">
<div id="player">
<div>Office supplies corporate presentation </div>
</div>
<script type="text/javascript">var
so = new SWFObject('mediaplayer.swf','mpl','404','303','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','303');
so.addVariable('width','404');
so.addVariable('file','rtmp://draco.streamingwizard.com/streamingvideo123');
so.addVariable('image','images/OS.jpg');
so.addVariable('id','webpage/OSmp');
so.addVariable('searchbar','false');
so.addVariable('backcolor','0xEEEEEE');
so.addVariable('frontcolor','0x000033');
so.addVariable('showdigits','false');so.write('player');
</script></td>
Second block of script:
<td align="center" valign="top">
<div id="player2">
<div>Other corporate presentation </div>
</div>
<script type="text/javascript">var
so = new SWFObject('mediaplayer.swf','mpl','404','303','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','303');
so.addVariable('width','404');
so.addVariable('file','rtmp://draco.streamingwizard.com/streamingvideo123');
so.addVariable('image','images/other.jpg');
so.addVariable('id','webpage/othermp');
so.addVariable('searchbar','false');
so.addVariable('backcolor','0xEEEEEE');
so.addVariable('frontcolor','0x000033');
so.addVariable('showdigits','false');so.write('player2');
</script></td>
@Linda,
Apart from changing the line
so = new SWFObject('mediaplayer.swf','mpl','404','303','8');
to mp2, mp3 etc,
That's all you need to do. If you ever use the JavaScript API, use the corresponding 'javascriptid' for each player instance.
so = new SWFObject('mediaplayer.swf',<strong>'mpl1'</strong>,'404','303','8');
...code...
so.addVariable('javascriptid', <strong>'mpl1'</strong>);
...code...
so.write('player1'); I had exactly the same problem as the first poster, and I solved it with numbering the
<div id="player"> & so.write('player');
to
<div id="player1"> & so.write('player1');
and so on, for each next player on the page.
@ Larry
many thanks helping me out with this effective because simple solution
Thx >raytracer78!!!
Hello, I am having a similar problem. I followed all your advice in the above string - but it still won't display the second video properly on the page. Here's my code, what am I doing wrong?? I am using the JW Player code.......
<div id="div1">
<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','220','200','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=movies/testimonials.flv&image=images/prev_athletes.jpg');
s1.write('preview');
</script>
</div>
<div id="div2">
<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='swfobject2.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player2.swf','player2','220','200','9');
s1.addVariable('swfobject2', 'player2');
s1.write('player2');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=movies/raylewis.flv&image=images/prev_ray.jpg');
s1.write('preview');
</script>
</div>
HELP!!! Thanks, Cheree
You missed the part about having a unique id attribute for each of the HTML elements that the object elements will be written into.
<p id="preview1">
<p id="preview2">
<p id="preview3">
<p id="preview4">
<p id="preview5">s1.write('preview1');
s1.write('preview2');
s1.write('preview3');
s1.write('preview4');
s1.write('preview5'); And don't wrap the JavaScript in the division elements.
<div id="div1"><p id="preview1">The player will show in this paragraph</p><strong></div></strong>And use a more informative alternate content message.
<div id="div1"><p id="preview1"><strong><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></strong></p></div>You only need this line once in the head element of your HTML document.
<script src="swfobject.js"></script>It's not correct to specify the type of file that is to be loaded — the server will determine that.
This post was extremely helpful. The code examples were very clear and easy to follow.
This saved me some serious time and allowed me to get multiple videos up and running fast. Thanks for sharing.
Thank you, thank you. I have seven players on one page, and only the first one was showing up. I figured the players had to be differentiated in order to display properly, but I didn't know how. This post was very helpful.
Hi All
Very useful thread and everything seems to have worked for me. But can u guys pls check my code below - I want to make sure that although it works for me, it has been done correctly:
**** Note that I did NOT change this line:
**** var so = new SWFObject('http://www.mywebsite.com/jwplayer/player.swf','mpl','480','320','9');
**** The 'mpl' bit....
**** Do I have to do that on each one, so 'mpl1' and 'mpl2' - ?
**** THANKS VERY MUCH
<script type='text/javascript' src='swfobject.js'></script>
<div id='vertical1'><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div>
<script type='text/javascript'>
var so = new SWFObject('http://www.mywebsite.com/jwplayer/player.swf','mpl','480','270','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://mywebsite.com.s3.amazonaws.com/test.mp4');
so.addVariable('image','http://www.mywebsite.com/images/test.png');
so.addVariable('frontcolor','000000');
so.addVariable('screencolor','FFFFFF');
so.write('vertical1');
</script>
<script type='text/javascript' src='swfobject.js'></script>
<div id='vertical2'><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div>
<script type='text/javascript'>
var so = new SWFObject('http://www.mywebsite.com/jwplayer/player.swf','mpl','480','320','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://mywebsite.com.s3.amazonaws.com/test2.mp4');
so.addVariable('image','http://www.mywebsite.com.com/images.test2.png');
so.addVariable('frontcolor','000000');
so.addVariable('screencolor','FFFFFF');
so.write('vertical2');
</script>
You need to update your variable names for each instance of the player, like so:
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Multiple Players</title>
</head>
<body>
<script type="text/javascript" src="swfobject.js"></script>
<div id="hi"></div>
<script type="text/javascript">
var s1 = new SWFObject('player.swf','mp1','500','400','9');
s1.addParam('allowscriptaccess','always');
s1.addParam('allowfullscreen','true');
s1.addParam('wmode','transparent');
s1.addVariable('file','video.flv');
s1.addVariable('image','dawg.jpg');
s1.write('hi');
</script>
<div id="hi2"></div>
<script type="text/javascript">
var s2 = new SWFObject('player.swf','mp2','500','400','9');
s2.addParam('allowscriptaccess','always');
s2.addParam('allowfullscreen','true');
s2.addParam('wmode','transparent');
s2.addVariable('file','bunny.flv');
s2.addVariable('image','dawg.jpg');
s2.write('hi2');
</script>
<div id="hi3"></div>
<script type="text/javascript">
var s3 = new SWFObject('player.swf','mp3','500','400','9');
s3.addParam('allowscriptaccess','always');
s3.addParam('allowfullscreen','true');
s3.addParam('wmode','transparent');
s3.addVariable('file','video.flv');
s3.addVariable('image','dawg.jpg');
s3.write('hi3');
</script>
<div id="hi4"></div>
<script type="text/javascript">
var s4 = new SWFObject('player.swf','mp4','500','400','9');
s4.addParam('allowscriptaccess','always');
s4.addParam('allowfullscreen','true');
s4.addParam('wmode','transparent');
s4.addVariable('file','bunny.flv');
s4.addVariable('image','dawg.jpg');
s4.write('hi4');
</script>
<div id="hi5"></div>
<script type="text/javascript">
var s5 = new SWFObject('player.swf','mp5','500','400','9');
s5.addParam('allowscriptaccess','always');
s5.addParam('allowfullscreen','true');
s5.addParam('wmode','transparent');
s5.addVariable('file','bunny.flv');
s5.addVariable('image','dawg.jpg');
s5.write('hi5');
</script>
</body>
</html>
thanks a lot buddy appreciate it
Can you post your full player code so someone can help you?