Is there a better way to use PrettyPhoto (lightbox) and JWPlayer together?

Scam · 25 Feb 2011 at 17:38

I was using PrettyPhoto to load some movs for playing on my site, but I've since realised that they won't stream no their own.

So I've now implemented JWPlayer but I'm struggling to make it work nicely within the lightbox popups. As it stands I'm just using PP to open hidden divs which contain the JWPlayer. Surely this isn't the best way?! :confused:

As below.. 'rockband' is the hidden div and then 'container1' is the container for JWPlayer. It seems a bit of a long way round to do it, and isnt working in IE (surprise surprise..). PP can open SWFs directly.. maybe I should be using flashvars and opening the JWPlayer sfw or something..? :confused:

Code:

<div id="rockband" class="hide" style="height: 400px; width: 400px;">
	<p id="container1">Please install the Flash Plugin</p>
	<script type="text/javascript">
	var flashvars = { file:'../../embed/videos/rockband.mov',autostart:'true' };
	var params = { allowfullscreen:'true', allowscriptaccess:'always' };
	var attributes = { id:'player1', name:'player1' };

	swfobject.embedSWF('../embed/jwplayer/player.swf','container1','480','270','9.0.115','false',flashvars, params, attributes);
	</script>
</div>
			</div>

Thanks for any pointers!

Tripnologist · 25 Feb 2011 at 18:53

I'm not sure about jwplayer, but if you don't mind switching to flowplayer, it works well with jquerytools.

http://flowplayer.org/demos/tools/overlay.html

http://flowplayer.org/setup/index.html

Scam · 28 Feb 2011 at 18:34

Thanks, that's working pretty well now. But I can't see how to make it load on regular anchors? All of their examples show a button used to load the overlay :confused:

Tripnologist · 28 Feb 2011 at 18:51

You can use any element you want, just be sure to update it in the script as well.

Code:

<button href="#" rel="div.overlay">Open overlayed video</button>
<a href="#" rel="div.overlay">Open overlayed video</a>

Code:

$("button[rel]").overlay();
$("a[rel]").overlay();

Scam · 1 Mar 2011 at 16:33

Hmn still no joy. When you say update it in the script as well, do you mean the flowplayer.js file, or the script in the header?

I'm going to have multiple video players on a page so I'm using the sample from the FP site for multiple links. Works fine when it's the two buttons, but the below won't work.. (on the normal link) :confused:

Code:

	<script>
$(function() {

	// setup overlay actions to anchors
	$("a[rel]").overlay({

		// use the Apple effect for overlay
		effect: 'apple',		
		
		expose: '#789',				
		
		onLoad: function(content) {
			// find the player contained inside this overlay and load it
			this.getOverlay().find("a.player").flowplayer(0).load();
		},
		
		onClose: function(content) {
			$f().unload();
		}
	});				
	
	// install flowplayers
	$("a.player").flowplayer("../embed/flowplayer/flowplayer-3.2.6.swf"); 
});	
</script>

Code:

<p>
	<a href="#" rel="#overlay1">Open overlayed video</a>
	<button rel="#overlay1">Video 1</button> 
	<button rel="#overlay2">Video 2</button>
</p>

<!-- overlays for both videos -->
<div class="overlay" id="overlay1">
	<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
		&nbsp;
	</a>
</div>

<div class="overlay" id="overlay2">
	<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
		&nbsp;
	</a>	
</div>

Thanks for any pointers! I'm scanning the FP forums now..

Scam · 1 Mar 2011 at 19:40

Right.. I'm getting there. Randomly I tried it out using the image files I wanted as links and it worked.. just wouldnt work on the text anchors. How strange, but nevermind.

I'm now trying to get each video to scale properly, as they're all different aspects and sizes. I'm trying to set the height/width of each overlay div and have applied a new class to each player too but I keep ending up with massive borders and/or it not scaling properly.

Is this the right place to put the scale option? I'm not entirely convinced it's doing anything!

Code:

	$(function() {

	// setup overlay actions to buttons
	$("a[rel]").overlay({

		// use the Apple effect for overlay
		effect: 'apple',
		scale: 'orig',
		
		expose: '#789',				
		
		onLoad: function(content) {
			// find the player contained inside this overlay and load it
			this.getOverlay().find("a.player").flowplayer(0).load();
		},
		
		onClose: function(content) {
			$f().unload();
		}
	});				
	
	// install flowplayers
	$("a.player").flowplayer("../embed/flowplayer/flowplayer-3.2.6.swf"); 
	});

Thanks again!

Tripnologist · 2 Mar 2011 at 10:28

Scam said:
Is this the right place to put the scale option? I'm not entirely convinced it's doing anything!

Scaling is a property of the clip object within flowplayer. You currently have it applied to the overlay.

Code:

$("a.player").flowplayer("../embed/flowplayer/flowplayer-3.2.6.swf",{ 
	clip: {
		scaling: "orig"
	}
});

Scam · 2 Mar 2011 at 17:22

Ah, yes I see, oops. You can tell I'm no coder eh

Unfortunately what you posted doesn't seem to work. I'm getting the following error in FF:

Error: missing } after function body
Line: 49

which sounds fairly straightforward but I can't seem to fix it!

I've looked at other examples and everything seems to be as it should :confused:

Tripnologist · 3 Mar 2011 at 09:23

Are you missing your closing });?

Scam · 3 Mar 2011 at 17:29

Nope, here is the script:

Code:

	<script>
	$(function() {

	// setup overlay actions to buttons
	$("a[rel]").overlay({

		// use the Apple effect for overlay
		effect: 'apple',
		
		expose: '#789',				
		
		onLoad: function(content) {
			// find the player contained inside this overlay and load it
			this.getOverlay().find("a.player").flowplayer(0).load();
		},
		
		onClose: function(content) {
			$f().unload();
		}
	});				
	
	// install flowplayers
	$("a.player").flowplayer("../embed/flowplayer/flowplayer-3.2.6.swf",{ 
		clip: {
			scaling: "orig"
		}
	});
	</script>

I shouldnt keep posting the link but here it is: link removed :confused:

Tripnologist · 3 Mar 2011 at 18:49

You need to close your function.

Code:

$(function() {
	$("a[rel]").overlay({
		effect: 'apple',
		expose: '#789',				
		onLoad: function(content) {
			this.getOverlay().find("a.player").flowplayer(0).load();
		},
		onClose: function(content) {
			$f().unload();
		}
	});				
	
	$("a.player").flowplayer("../embed/flowplayer/flowplayer-3.2.6.swf",{ 
		clip: {
			scaling: "orig"
		}
	});
});

Scam · 4 Mar 2011 at 18:58

Argh, thanks for being patient. Trying to learn all this and work 12hr night shifts is not fun

I'm getting there (so frustrating this is the last part of the site!), but have come across a rather large problem. It seems that the height of the overlay is not actually modifiable!! I was tearing my hair out trying to change it using css.

There's a few threads on the forum, e.g. http://flowplayer.org/tools/forum/40/20849

Argh. Bit of a disaster really. What's the point in having a lovely popup for videos without the ability to make it work aesthetically. I'm pretty dissapointed if I'm honest

As you can see on that link above - with all those videos I've just got varying sizes of popup and hardly any of them look as they should within the popup.

I might have to go back to PrettyPhoto and simply embed Flowplayer in that.. :confused:

Tripnologist · 4 Mar 2011 at 20:08

Why would you want the videos being completely different sizes anyway?
I mean, can you imagine youtube if it had a ton of different video sizes?

The overlay is adjustable however, you'll just need to adjust it per video if you're going to have them all different sizes.

Scam · 5 Mar 2011 at 17:48

I'm only working with what encodes I've been given unfortunately. Well, I have re-encoded them to h264 but some of them started off small so I can't up-res them or anything. Annoying, I know.

I'm looking on the FP forums and it seems to be an issue people have raised. I'm going to investigate!

Scam · 6 Mar 2011 at 17:50

How strange. I spent a good 2 hours yesterday experimenting with different background images for the overlay (resizing them according to the aspect ratio of each video) and still couldn't get them to look right. I'd always end up with a margin missing at the bottom (i.e. the video overlapped the overlay). No matter what I set my margins/borders/padding too. Even if I expanded the background image to compensate. Very strange indeed, and it seems to be a common problem if you read the FP forums.

Then I was reading these lovely forums and came across this thread about CSS curves. Long story short and I've simply used CSS3 together with PIE to make it work in IE. So unbelievably easy!

It's a shame I didn't know about PIE until now. My design is made up of a million nested divs and gifs making my rounded corners. Nevermind

Thanks again for your help Tripnologist

Tripnologist · 7 Mar 2011 at 11:22

No problem. Sorry I couldn't be of more help, I've just been so busy of late with various projects that spare time is at a premium.
Glad you got it all sorted and tbh, figuring something out on your own is strangely rewarding.

Scam · 7 Mar 2011 at 18:34

Oh dear, looks like the celebrations were a little premature. FP seems to completely fall over whilst using IE. I've got IE6 and this is what I see:

Apparently it's the same in IE8

Tripnologist · 7 Mar 2011 at 20:32

I haven't tested this or anything, but try creating a 1x1px white png and then apply it to your overlay.

Code:

.overlay { background:url('vidOverlay.png') #fff;}

Scam · 8 Mar 2011 at 18:26

How very odd. I do think FP has a bit of a flaw here, regarding the sizing of the overlay. Putting that white bg down as you suggested, actually just filled in that grey box. So obviously the overlay is still being sized by FP - in some way that is out of my control. I've tried absolutely everything in the CSS/html to no avail.

However, what I have done is create a 1x1 transparent png for the background, which does the job. It's obviously not technically correct, but I do think I'd be going around in circles trying to resize that overlay. I just don't think it's possible.

Thanks again, now to stop IE coming up with ActiveX controls

Tripnologist · 9 Mar 2011 at 10:11

I can try and take an actual look at it tonight for you.
I have it working perfectly fine and can resize the overlay however I want to, so something is wrong.