jQuery Animate wrapper Bug

5 replies [Last post]

Posted: Wed, 2012-01-18 08:27 martin leung

I have a source code bellow

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jwplayer.js"></script>
<div id="mediaplayer"></div>
<script type="text/javascript">
	function animate() {
		$("#mediaplayer_wrapper").animate({width: "300px", height: "300px"}, 500, function() {
			$(this).animate({width: "100px", height: "100px"}, 500);
		});
	}
	jwplayer("mediaplayer").setup({
		flashplayer: "player.swf",
		file: "video.mp4",
		width: 100,
		height: 100,
		controlbar: "none"
	});
</script>
<input type="button" value="Animate" onclick="animate()">

When I click Animate button while jwplayer is playing, the video size is moddify. How to fix it ? @@

Posted: Thu, 2012-01-19 13:52 PabloS

@martin -

Right now, it's not currently recommended to use the JW Player with the jQuery animate method.

Posted: Fri, 2012-01-20 06:38 Martin Leung

I think this bug comes from stretching uniform mode. When I change stretching mode on right click menu a round, it comeback normally. How can I change stretching mode while jwplayer is playing, by javascript?

Posted: Fri, 2012-01-20 19:43 PabloS

@Martin -

There's currently no JavaScript API mechanism to change the player's stretching mode; right nwo, it's only available in the right click menu.

Posted: Sat, 2012-02-18 18:47 Ixian

You can animate html elements around the player, but Pablo is correct, there is no way to animate the player itself at the moment. This would be nice, for html5 and such.

Right now I've found two ways to approach this:

1) Only works with the Flash player (i.e. in html5 fallback the player itself will not resize) - simply set the width and height of the player to 100% (or some other percentage) and put it inside a container with fixed width/height, then use JQuery to animate that container - this will cause the player to fill the newly animated size gracefully, as long as it's Flash (i.e. this doesn't work for iPad, etc).

2) Add a call to the jwplayer API "resize" command to your JQuery function that animates the surrounding container (Remember that JQuery in the end is just regular Javascript with it's own DOM functions, so you can mix an match regular JS with JQuery in the same function.) Bind it however you like (such as with a toggle, so you can assign a clickable element). This way, the html container around the player will animate, and the player will change size (without animation). For making something bigger, this works pretty well - it all happens so fast you don't notice that the player itself is simply "jumping" in size. For making it smaller again, you'll see the player instantly change size, then the animation of the container (depending on the speed at which you are animating) catches up, producing a "snapping" effect that you may or may not like.

You could either write a little function for the JW Player resize like:

function resize(width, height) {
                        jwplayer("player").resize(width, height);

And then add the resize call to your JQuery animation function like:

resize(640, 480);

Or if that's the only place you'll be resizing just do the call to the api right in the JQuery function itself, up to you. Something like this works using JQuery:

$(function () {
                $(".resizeclick").toggle(function () {
                    $("#mediaplayer_div").animate({ width: "645px", height: "510px" }, 600);
                    resize(640, 480);
                },
          function () {
					$("#mediaplayer_surround").animate({ width: "325px", height: "270px" }, 600);
					resize(320, 240);
			});
				});

Where "resizeclick" is the name of the element you want to be clickable, and "mediaplayer_div" is the element around your player. Using "toggle" in JQuery you can cause it to click back and forth between sizes with the same button/link. Of course you can (and should) also replace the text of the link depending on the size, etc, but I'm not going to write the whole thing out, if you are reading this far I'm assuming you have some idea how to write JS/JQuery :)

I do this now, and it works quite well, even on tablets like the iPad, but of course it would be *super cool* if JW supported animated effects using JQuery in the API as well.

Posted: Tue, 2012-02-21 14:32 PabloS

@Ixian -

Thanks for sharing!

Any suggestions on how you believe the JW Player can support jQuery animations better?

jQuery Animate wrapper Bug

Post new comment

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company