Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

How to get shadowbox to play mp4 files with JW Pla

I want to display h264 ...I want to display h264 compressed fiels on my website, so I am about to but a license for JW Player, it is a wonderful player! Then I found the Shadowbox, and it can display images and video in a very cool way. It can use JW Player for Flash content, and a lot of other players as well.

Anyway, I really would like to use Shadowbox, and to make Shadowbox to use JW Player to display my mp4 files. But for some reason it kicks up the Quicktime Player... And I havent gotten any response for this question from the Shadowbox forum (yet).

Anyone here have any idea how to make Shadowbox use JW Player for mp4 files? The solution would sell a commercial license for JW Player in 3 seconds... :)

22 Community Answers

Up Down

JW Player

User  
0 rated :

I used thickbox but it works.

Use put the regular code into an HTML file and bam. Your good to go. I have it in an easy to use wordpress plugin here:

http://www.simplethoughtproductions.com/sfv-plugin/

One could take that code and make it work without wordpress fairly easily.

Would be willing to take it on as a side project if you needed a coder :)

-Josh Chesarek
http://www.simplethoughtproductions.com/contact/

Up Down

JW Player

User  
0 rated :

Well I already have a coder, but thanks anyway. Im just trying to find a way to solve this for him, to relieve him of some of all the work he has to do... But if he has way too much to do I might get back to you.

the sfv plugin you made does "shadow" down the rest of the screen, but it doesent display and zoom up the image area quite as beautifully as the shadowbox does.

Up Down

JW Player

User  
0 rated :

This is true. But it does use jquery which has lots of fancy transitions so with a little editing you could probably make that happen. If I get some down time today Ill try and play with Shadow Box, it looks pretty cool :)

Up Down

JW Player

User  
0 rated :

Supercool if you find where to put the tweak! Im guessing you can specify somewhere in shadowbox what player to use, but I have no idea where...

I have just about lost my hopes about the shadowbox forum. Not one single reply yet, and there are sereval questions in the forum that has gone totally unanswered... It feels more like a dead community. :(

Up Down

JW Player

User  
0 rated :

Ok so I looked at the Shadowbox stuff. The reason this is happening is because shadow box is programmed to use what it can for the file types. When it sees a .mov or .mp4 it checks if the computer has quick time. if it does it uses that.

My plugin works with shadow box and I may even switch now as its pretty cool. I have a few size bugs to work out but short of that it works because it just loads up my video.php which renders the code for the player.

From the shadow box site "Shadowbox uses a smart plugin detection mechanism that automatically detects whether or not the client is capable of displaying linked content. For movies that can be played using either QuickTime or Windows Media Player, Shadowbox will automatically detect which one is installed and use it. In the case of a missing plugin, Shadowbox can either display a useful error message with a link to the appropriate plugin download page (the default behavior), or it can ignore the gallery piece altogether. See the handleUnsupported option in the options section below for more details on how to configure this behavior."

I noted in their demo that they are using 3.13. Most people still do not have the flash plugin to play .mp4 so its probably smart to leave it to play with quick time but basically the shadow box does need to be updated to tell it that .mp4 is supported by the flv player. If I have time I will try to find the lines of code that need updates in shadowbox.

Up Down

JW Player

User  
0 rated :

I just recieved an answer in the Shadowbox forum!

----------------------------------------------------------------------------------------------------

You need to alter the options.ext object to include mp4 in your flv array, like this:

var opts = {
// all the rest of the extensions from the source file here...
flv: ['flv','mp4']
};

Shadowbox.init(opts);


----------------------------------------------------------------------------------------------------

Up Down

JW Player

User  
0 rated :

Very nice! I see the section in the code where they specify the extensions so you can probably do it there too. Good stuff :)

Up Down

JW Player

User  
0 rated :

@Shadowlurker
Where exactely do I have to alter the code in order to get mp4 to play?
Thx

Up Down

JW Player

User  
0 rated :

Add the file variable after the player.swf:

<a href="/directory/player.swf?file=yourfilename.flv" rel="shadowbox;width=500;height=380">

Up Down

JW Player

User  
0 rated :

Now I just need to get autostart to function. Anybody?

Up Down

JW Player

User  
0 rated :

Ok..

Supose that I add <a href="/directory/player.swf?file=yourfilename.flv" rel="shadowbox;width=500;height=380">

But how can I add the logo, lightcolor, etc, etc..

Or maybe adding total script to shadowbox.init will be easier??

How can I do it?

Up Down

JW Player

User  
0 rated :

Ok I will try to explain better

1. I get my Jw Player Code normally, everything is ok

<script type="text/javascript" src="http://www.jeroenwijering.com/embed/swfobject.js"></script>

<div id="player">This text will be replaced</div>

<script type="text/javascript">
var so = new SWFObject('http://www.longtailvideo.com/jw/embed/player.swf','mpl','420','309','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=http://200.118.0.31/golgolgol.net/copamustang2009-i/todoscontratodos/fecha1/jun-mil.flv&image=http://i203.photobucket.com/albums/aa23/djchr/Fotos%20MTvNet/HeaderMillosTVFondoBlanco400.png&backcolor=000000&frontcolor=10A4E1&lightcolor=10A4E1&screencolor=FFFFFF&logo=http://i203.photobucket.com/albums/aa23/djchr/MTVsolo50x36.png&controlbar=over');
so.write('player');
</script><br><br>

---------
2. How can add the whole code, for see opening in a shadowbox way??

Thanks for the help.

Up Down

JW Player

User  
0 rated :

i'm having the same problem. how do we get it to work in shadow box? i can get shadow box to load images but not video! :(

i been trying to resolve this issue for the past 48 hours. i've been working on this pretty much non stop. can someone please help?

i got shadow box installed but when i click on the link or what not shadow box pops up but no video plays..

Up Down

JW Player

User  
0 rated :

@Mexi:

Try using the params for playing videos on init of shadowbox:
e.g.

Shadowbox.init({players:["flv"]});

You can place a SWF player in the folder /libraries/mediaplayer/player.swf (under the shadowbox folder).

I cannot figure out how to use the flv with swfobject inside the shadowbox. I get flv's playing fine. But with no flash installed.. Just a darkened screen and no content div.

Up Down

JW Player

User  
0 rated :

Hi guys, I had to do something similar like this over here and couldn't figure out why my mp4 was not playing with the JWPlayer...
So, when I made sure the mime map in Shadowbox was set properly, that issue was solved.

But the next issue was: how to set the flashvars to "dress up" my player?
After some searching and "trial and error'ing" I got the following solution (combination of getting the mimetypes mapped and setting flashvars for the JWPlayer in the Shadowbox)

bc.. <script type="text/javascript">
var shadowBoxMimeMap =
{
img: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
swf: ['swf'],
flv: ['flv', 'm4v', 'mp4'],
qt: ['dv', 'mov', 'moov', 'movie', 'mp4'],
wmp: ['asf', 'wm', 'wmv'],
qtwmp: ['avi', 'mpg', 'mpeg'],
iframe: ['asp', 'aspx', 'cgi', 'cfm', 'htm', 'html', 'pl', 'php', 'php3', 'php4', 'php5', 'phtml', 'rb', 'rhtml', 'shtml', 'txt', 'vbs', 'java']
};

Shadowbox.init({
language: "en",
players: ["img", "flv"],
handleOversize: "resize",
initialHeight:750,
initialWidth:750,
flashVars: {
frontcolor: '0xf9f9f9',
lightcolor: '0xffffff',
controlbar: 'over',
stretching: 'fill'
},

ext: shadowBoxMimeMap
});
</script>



Hope this helps!

Up Down

JW Player

User  
0 rated :

Change this:
players: ["img", "flv"],

in this:
players: ["img", "flv", "swf"],

Because the player is a swf file, else it can't open the player in the shadowbox.

Up Down

JW Player

User  
0 rated :

Shadowbox 3.0.3 is opening my H.264 MP4's files in QuickTime -- rather then my licensed copy of the JW Flash Player

I read and tried the "mime map" solution here:
http://shadowbox-js.1309102.n2.nabble.com/mp4-files-supposed-to-open-in-flash-plays-in-Quicktime-tp1310242p1310244.html

...And here (end of page):
http://www.longtailvideo.com/support/forums/jw-player/javascript-interaction/5930/how-to-get-shadowbox-to-play-mp4-files-with-jw-pla

I've also tried the solution posted here:
http://shadowbox-js.1309102.n2.nabble.com/mp4-files-supposed-to-open-in-flash-plays-in-Quicktime-tp1310242p1310243.html

And, finally, I went into the shadowbox.js and removed the qt - mp4 references -- and that didn't' work either.

My licensed version of JW Player has been copied into my website root directory -- as well as the Shadowbox 3.0.3 directory (of course, with the "licensed" name removed)

It may very well be operator error on my part -- but none of these solutions seem to force Shadowbox to launch my .mp4 videos in the JW Player -- they are always launched in QuickTime.

Any suggestions regarding how I can accomplish this?

Thanks very much in advance.

Up Down

JW Player

User  
0 rated :

Hi Zack,

Thanks for your response.

Unfortunately, I need Shadowbox for more than video -- and I need one unified Lightbox solution.

I spent some time discussing this with Ethan today.

And I'm posting this here -- in the hopes that someone else has been in my position -- and knows how to solve this problem.

Up Down

JW Player

User  
0 rated :

I resolve that problem with shadowbox

I'm working with Shadowbox 3.0.3, On the Shadowbox.js file, change this part
" S.flv.ext=["flv","m4v"] " with " S.flv.ext=["flv","m4v","mp4"] ".

I hope this works with anybody. Please comment if this solution helped you.

Up Down

JW Player

User  
0 rated :

Marshall Sat, 2009-02-07 13:21

Add the file variable after the player.swf:

<a href="/directory/player.swf?file=yourfilename.flv" rel="shadowbox;width=500;height=380">

YOU ARE THE BEST DUDE !!!! i love you

Up Down

JW Player

User  
0 rated :

<a href="/directory/player.swf?file=yourfilename.flv" rel="shadowbox;width=500;height=380">
This is an nice Ideo! But the problem is, the output is the default JW Player! With the link like this you can not open the video with your self designd player!

Has anyone an Idea how to open my own player?
How to gif the player swf the parameter config=myplayer?

Thanks very much in advance.

Up Down

JW Player

User  
0 rated :

Is there a way to get JWPlayer working with Shadowbox 3.0.3 to play mp4 files on an iPhone or iPad?

This question has received the maximum number of answers.