Nov. 16, 2009David Wilson
I have followed the instrustions on the following page to the letter but I am getting nowhere with the JW Box. I am using an image to link to a video, just like the first example.
http://www.longtailvideo.com/support/tutorials/JW-Player-Lightbox
Below is the code I am using (taken from the aforementioned page). I have replaced the url place holders with appropriate, working urls.
<div class="jwbox">
<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="[Thumbnail URL]"/>
<div class="jwbox_hidden">
<div class="jwbox_content">
<object width="320" height="240" type="application/x-shockwave-flash" id="ply" name="ply" data="http://player.longtailvideo.com/player.swf"><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="flashvars" value="file=[Video URL]&image=[Thumbnail URL]"/></object>
<p>Click the close button to return to the web page.</p>
</div>
</div>
</div>
What could be going wrong? Thanks in advance for any help.
Nov. 16, 2009hobbs
Works — Firefox only. (Maybe later I can figure out what's wrong with IE — probably some CSS or JS thing.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Simple JW Box - JWMP v4.7.x</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.2');
</script>
<script src="jquery.jwbox.js"></script>
<link rel="stylesheet" type="text/css" href="jwbox.css"/>
</head>
<body>
<div id="container">
<div id="jwbox_background">
</div>
<div class="jwbox">
<img width="160" height="120" alt="JW Box Image" title="JW Box Image" src="image01.jpg" />
<div class="jwbox_hidden">
<div class="jwbox_content">
<object width="600" height="358" type="application/x-shockwave-flash" id="ply" name="ply" data="player-4.7.581.swf">
<param name="allowfullscreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="flashvars" value="file=video02.mp4&image=image02.jpg"/>
</object>
<p>Click the close button to return to the web page.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Change to your video file and images.
Nov. 17, 2009David Wilson
Ok that has helped me get it working in all browsers from IE7 up. The issue I'm having now is displaying multiple IMAGES linking to JW box in a page. It works fine in all browsers except, you guessed it, IE8. I hate those guys. Any advice?
Nov. 17, 2009hobbs
Try this Test Page in IE8.
http://willswonders.myip.org:8074/Simple_JWBox.html
Nov. 17, 2009David Wilson
Sorry, i should have been more specific. I can get the videos showing and playing correctly in the JW Box but when i try to close any JW Box video apart from the first one it the video continues playing in the background.
Nov. 17, 2009hobbs
The player is sent a STOP event here when it is toggled by clicking on the background or the Close image. I wonder why it's not working?
try
{
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
}
You might put an alert in the try to see if it is firing.
Nov. 18, 2009David Wilson
Ah I have it sorted now. IE uses the object tag and each object tag must have an individual id. Pretty basic solution but i was overlooking it as I'm using a Coldfusion module to call in my video player.
Thanks for your help hobbs. You got me looking in the right direction.
Nov. 18, 2009hobbs
Wonderful!
Good Luck!
Here are some helpful links to learn more about the JW Player™:
Earn money with ads from LongTail's AdSolution. Watch our demos and sign up now!
If you don’t buy a commercial license, you cannot use a JW Player™ on (i) a site that has ads; (ii) a corporate site; or a (iii) CMS. Our licenses are very inexpensive, so what are you waiting for? Buy a license today.