How do i Get JW Player to work with Shadowbox?

27 replies [Last post]

Posted: Tue, 2009-02-17 09:49 Mexi

I been trying to get my JW player working with shadowbox for about 2 days now. I worked on it for over 24 hours the other day -_-.

this is pretty much what i'm trying to do.

http://eu.aiononline.com/en/movies

if you click on an image shadowbox loads up and plays a video.. Can anyone help me set shadowbox + JW up together?

Oh btw, i do believe i have shadowbox installed properly. I can have images load in shadowbox but not JW Player >_<. I just get a black window with shadowbox and nothing happens.

here my Shadowbox setup.

<script type="text/javascript" src="../js/swfobject.js"></script>
<script type="text/javascript" src="../js/flow.embed.js"></script>
<script type="text/javascript" src="../js/flashembed-1.0.0.min.js"></script>
<script type="text/javascript" src="../js/flowplayer-3.0.5.min.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../shadowbox/build/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="../shadowbox/build/shadowbox.js"></script>
<script type="text/javascript">

Shadowbox.loadSkin('classic', '../shadowbox/src/skin');
Shadowbox.loadLanguage('en', '../shadowbox/build/lang');
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], '../shadowbox/build/player');
window.onload = Shadowbox.init;
</script>

Posted: Tue, 2009-02-17 16:53 Graxeon

Well first of all:

Shadowbox doesn't seem to work in Internet Explorer. And sadly, most people use that since it's the default internet browser. Instead of opening up that box it just downloads the FLV file. So it's a bit retarded xD.

Second:

Use HighSlide instead. It offers pretty much the same thing. You can display anything in that box (iframe, html page, etc). It may take a little bit of time to understand how to use it but it's worth the time.

Just google "Highslide" ...it'll come up.

Enjoy :)

Posted: Tue, 2009-02-17 18:32 Mexi

thanks for the info Graxeon, I checked it out and it isn't want i'm reallying wanting. I use Mozilla Firefox and most people i know Use Mozilla.

If anyone can help me with this problem, it would be great. Thanks.

Posted: Tue, 2009-02-17 18:52 Graxeon

You sure it's not? Check out an old version of Highslide being used here (I say "old" because the background doesn't fade to black in IE; it does in FF, though. The newest version should work in IE too, but I'm too lazy to check) :

http://www.anime-congeries.it.tc/

Click the giant play button symbol.

As you will see, it is pretty much the same thing.

Posted: Tue, 2009-02-17 22:25 Mexi

I'm pretty sure its not what i want, its different then shadow box. Shadow box is exactly what i want. I just need to figure out how to get it into the code.

here is some temp code to show an example.

<div id='mediaspace'>This div will be replaced</div>

the width and height are displayed here.
var s1 = new SWFObject('/jw/embed/player.swf','ply','470','320','9','#ffffff');

470 and 320. According to shadow box i need to tell shadow box exactly what width to use. something like this.

rel="shadowbox;width=720;height=400"

but how would i add/enter that part of the code into the code above?

I still really need to get this working. im so confident going on day 4 now.

this website uses it.
http://eu.aiononline.com/en/movies

and i figure if they can, why cant I?

Posted: Wed, 2009-02-18 17:36 Graxeon

<a href="/dir/videos/yourmovie.flv" rel="shadowbox;width=470;height=320" title="Video title">Text to be displayed goes here</a>

Like that?

Posted: Sat, 2009-09-26 20:18 EZdoesit

Did you ever solve this problem?

I can have images load in shadowbox but not JW Player

I just get a black window with shadowbox and nothing happens.

Thanks

Posted: Sat, 2009-09-26 20:59 noMInd

http://www.longtailvideo.com/jw/?search=shadowbox

Posted: Wed, 2009-10-07 23:43 Chris

Just wanted to add that Shadowbox absolutely DOES work in Internet Explorer. In fact, it works in every single major browser out there. If you don't believe me, go to our movie page using IE, then open a trailer to a movie... you'll see it opens in Shadowbox.

Go to: www.theparanormalsociety.org/movies-online

Inaccurate info was given by Graxeon. Shadowbox works everywhere.

Posted: Fri, 2009-10-09 06:57 gomtuu

i am sorry, but it doesnt work!!!
ie8 screen is going dark, thats all!

Posted: Fri, 2009-10-09 11:19 Ethan LongTail

Hi,

This is Ethan from LongTail here to help you.

We have a tutorial now on how to do this - http://www.longtailvideo.com/support/tutorials/JW-Player-Lightbox

Please email me directly at ethan [at] longtailvideo [dot] com to follow up if you have any other questions, thank you.

Best Regards,
-Ethan

Posted: Fri, 2009-10-09 16:52 Rob Hindley

Ethan

This is different from playing it through Michael Jackson's Shadowbox?

On Michael's demo page the HEAD has the players setup and a simple <a> tag in the BODY.

Not really the same thing?

Posted: Mon, 2009-10-12 09:46 Ethan LongTail

Hi Rob,

They are different implementations.

Best,
-Ethan
-ethan [at] longtailvideo [dot]

Posted: Thu, 2009-11-19 15:41 taylor

Flash not working with your shadowbox- here is step by step to get it working.

download shadowbox to a folder named "shadowbox"

Include the files" shadowbox/shadowbox.css" and "shadowbox"/shadowbox.js" in your script.

to play flash we need to down load another plugin:

explained almost right at the below linke 3rd question down: (read the rest of this before going to this link or you will be confused)

http://www.shadowbox-js.com/faq.html

after download jw player the filenames will be different than these direction tell you. rename "player-viral.swf" to just player.swf and be sure to have all the jw player files in a folder named "mediaplayer" with the shadow box "libraries" folder. once you have exactly this shadow box will play your flash in all browsers.

-taylor

http://www.hawkessolutions.com

Posted: Fri, 2009-12-04 17:30 Ethan LongTail

Hi Taylor,

Look here - http://www.longtailvideo.com/support/tutorials/JW-Player-Lightbox

Our box is not based off of Shadowbox.

Best,
-Ethan

Posted: Tue, 2009-12-22 04:17 Veighlyn

This is my second post, figured out how to add player vars such as overstretching skins and such with shadowbox. In your code, simply put the ref to the file ie: <a href="video/bluetooth.flv" rel="shadowbox;height=400;width=640">
Now, here's where you go to add params:
open the shadowbox-flv js, in there you can add all of you params, example: skin:"mod_revx.swf",stretching:"fill",

Posted: Thu, 2010-01-21 04:48 Gaston

after spending almost three days trying to tie up Shadowbox with JV Player, Taylor, you are the only one witth the right answer!!

I tried to use the JV Lightbox, but it didn't work in IE6. :(

Posted: Sun, 2010-01-31 13:53 Sally

Hi,

I had problems using Shadowbox with JW Player when using swfObject, so I opted to switch to the JW Box lightbox and that solved the problem.

Mexi, if you're not a javascript maverick and willing to edit the shadowbox player code to your purposes, you should switch to JW Box.

Only trouble is, I like being able to (as in Shadowbox), link videos as galleries, so folks could click "previous" and "next in the lightbox to watch the next video. Any ideas on how to do this?

Posted: Thu, 2010-06-03 18:06 Terrell

I'm having the same issue with my flv. I've tried Taylors solution witch seems like the most logical, but I still cannot get my flv to play.

I created a "libraries" folder within the shadowbox folder, but i'm not sure if I have it in the right place.

Any suggestions?

Posted: Thu, 2010-06-03 18:49 Ethan LongTail

@Terrell - Can you provide a link to where you are running this?

Posted: Mon, 2010-06-21 11:27 Terrell

http://www.sleightadvertising.com/client_area/permaseal/portfolio/index.php

I have tried everything available on Shadowbox.js FAQ and its still not working.

Please advise

Posted: Mon, 2010-06-21 11:50 Ethan LongTail

When I click the thumb and the screen dims, checking in Firebug I get this error:

uncaught exception: unknown player iframe

Maybe, instead of using ShadbowBox, you could use our Lightbox, the JW Box?

http://www.longtailvideo.com/support/jw-player/21/jw-box-the-jw-player-lightbox

Posted: Mon, 2010-06-21 13:44 Terrell

Well, originally i wanted to have one method of updating this content, but i will give JW box a try.

Thanks

Posted: Mon, 2010-06-21 14:57 Ethan LongTail

Posted: Mon, 2010-06-21 15:04 Terrell

I integrated the JW Box for both video and Images. Honestly I prefer the condensed code and slick transitions of Shadowbox. But at least JW code works properly...

Thanks for the help.

Posted: Mon, 2010-06-21 15:04 Ethan LongTail

Posted: Fri, 2011-03-25 15:20 SnakeEye

@Mexi You don't need to have all the code you show above to play the videos. All you need is a simple link. The link can be a text or image link. You also need to make sure you have the following scripts in the head of any pages that will be using the player and shadowbox.

<!-- in the head section -->
<link rel="stylesheet" href="../shadowbox/shadowbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../shadowbox/shadowbox.js"></script>
<script type='text/javascript' src="../jwplayer5/jwplayer.js"></script>
<script type='text/javascript' src="../jwplayer5/swfobject.js"></script>
The swfobject.js can be in any folder you want, something like a folder named js that you may want to contain all your JavaScript files. I have mine in my root folder for all my sites.

You also need to make sure you are initializing the shadowbox script by including the following code:

<!-- place in head section -->
<script type="text/javascript">
Shadowbox.init({
    handleOversize: "resize",
    modal: true
});
</script>

Keep in mind that some CMS's require single quotes for example:

<script type="text/javascript" src="path/to/file.js">
may need to be changed to:
<script type='text/javascript' src='path/to/file.js'>

And finally the links to play the movie.

<a href="/dir/videos/yourmovie.flv" rel="shadowbox[Movies];width=470;height=320" title="Video Title">My Movie</a>
and then to play the movie using an image for the link:
<a href="/dir/videos/yourmovie.flv" rel="shadowbox;width=470;height=320" title="Video Title"><img src="path/to/image.jpg" border="0" width="width of your image" height="height of your image"></a>

You can use whatever image format you want ie: jpg, gif, bmp, png. As long as your server is configured to display png files properly you can use those. I prefer png because they are more clear and crisp and are easy to edit and make changes to.

You can also use an xml file to call up your video. I have another post at the link below that explains this.
http://www.longtailvideo.com/support/forums/jw-player/player-development-and-customization/18858/jw-...

You configurations for your player would be put into the xml file that you are calling up to play the videos.

You can also see a working example of this at http://www.selu159.com/videos/videooftheweek.php Look at the page source on that page.

Hope this helps :-)

Posted: Tue, 2011-08-23 22:46 ApexVideo

SnakeEye and Taylor, you guys rock. You finally got my stuff working. After scouring the web for the last 2 days, you guys had the winning answers. FINALLY I have what looks like will be a working shadow box with JW Player. Will let you know how the final site turns out.

How do i Get JW Player to work with Shadowbox?

Post new comment

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company