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

Video Player resize without re-instantiating

Hey all,

Is there a way to get the JW player to resize its dimensions without recalling the constructor? I have a situation where items in my "playlist" will possibly be changing aspect ratios (4:3 display to 16:9 display [widescreen]), and id like to accomplish this with the full display area settings i supply, without any black (background) area showing through. Changing the display area width and height after the player has been constructed causes a lot of visual bugs, and essentially crashes the player (renders it unusable).

How can I change the size of the player.swf object without restarting the whole MVC process from the beginning? Id like to be able to swap aspect rations from video file to video file without refreshing the page/player.

Thanks!

10 Community Answers

Up Down

JW Player

User  
0 rated :

assuming that you have made the dimensions available to javascript -

you could try set the embedding dimensions 100% and the flashvar displayheight to 9999 (and in this case *dont* set the flashvars width and height at all) then it should be possible to alter the size of the containing div (stylesheet) dimensions

please see the source of the sizediv demo from the demopage - http://home5.inet.tele.dk/nyboe/flash/mediaplayer/sizediv.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer

this show that you can change the size of the container without recreating the player by using % and 9999 dimensioning

the real problem is how to make the dimensions available to javascript -

you will have to either use the annotation element of the playlist and hardcode the dimensions there your self -
or use the javascript callback from the player using the javascript api:
http://www.jeroenwijering.com/?item=Javascript_interaction
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/javascript.htm

this has the disadvantage that the video must be loaded and playing before you can get the data -

only way to avoid this will then be to use an external playlist like the importxml_httprequest demo from the demopage:
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/importxml_httprequest.htm
http://home5.inet.tele.dk/nyboe/flash/mediaplayer

or the periboea.js library - http://home5.inet.tele.dk/nyboe/javascript/periboea



edit: it would seem that in recent version the width and height flashvars can also be set in % -

from the "Embedding flash" page - http://www.jeroenwijering.com/?item=Embedding_Flash bc.. The width and height parameters comply with the width and height of the SWF in pixels, but they can also be entered as a percentage of the SWF container (eg: width="100%").

Up Down

JW Player

User  
0 rated :

@andersen
Can you please explain for the following problem?
I am embedding JW player in a web page - should work on both Firefox and IE.
When the user selects a file to play, the player should resize from 1x1 pixels, to 300x200.
Alternatively, is there some kind of way to show/hide the player?
How does one do that?
thanks,
Anil

Up Down

JW Player

User  
0 rated :

I got it working - one has to do a getElementById() on the object id, *not* the div id.
Then you can resize the element.
document.getElementById("flvplayer").height = '5px';
Andersen, where art thou? :)

Up Down

JeroenW

JW Player Support Agent  
0 rated :

Note that the 4.0 player should handle on-the-fly resizing very gently. It was more or less hacked into the 3.xx player, but the 4.0 player is built to resize to any dimension at any time.

Up Down

JW Player

User  
0 rated :

I've tried the method as mentioned by anderson. This worked beautifully until I tried modifying the "position" attribute of a div which contains the player embed from unspecified to 'absolute', i.e. :
bc.. #PrimaryDisplay
{
width: 968px;
height:676px;
}

is replaced with
bc.. #PrimaryDisplay
{
position:absolute;
left:0px;
top:0px;
bottom:0px;
right:0px;
}


Unfortunately this change seems to cause the video to start again, as if the embed is being freshly loaded. The problem is solved when I take the 'position' specification out, but this breaks my formatting. The only way around it I can think of is to manually specify the size of the new video using javascript to set the size of the div, without making it position: absolute, but this is messy!

Is there any way to change the position attribute of the div without restarting the player?

nb: in my code, the first css file shown above is actually replaced by the second, in other words, the first css specs are actually removed and not merely written over.

Up Down

JW Player

User  
0 rated :

To fix the original problem of this thread, I made a couple of changes to onData function in the com.jeroenwijering.models.RTMPModel.

public function onData(dat:Object):void {
//if(dat.type == 'metadata' && !metadata) {
if(dat.type == 'metadata') { // ignore the metadata flag
if(dat.width) {
video.width = dat.width;
video.height = dat.height;
} else {
video.width = 320; // handle flv with no metadata
video.height = 240;
model.mediaHandler(video);
}
if(model.playlist[model.config['item']]['start'] > 0) {
seek(model.playlist[model.config['item']]['start']);
}
metadata = true;
} else if(dat.type == 'complete') {
clearInterval(timeinterval);
model.sendEvent(ModelEvent.STATE,{newstate:ModelStates.COMPLETED});
} else if(dat.type == 'fcsubscribe') {
if(dat.code == "NetStream.Play.StreamNotFound" ) {
stop();
model.sendEvent(ModelEvent.ERROR,{message:"Subscription failed: "+model.playlist[model.config['item']]['file']});
}else if(dat.code == "NetStream.Play.Start") {
setStream();
}
clearInterval(timeout);
}
model.sendEvent(ModelEvent.META,dat);
};

Up Down

JW Player

User  
0 rated :

Is this possible in version 5.1? If so, how? I've haven't been able to get it working...

EDIT: I've got it working

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Example using the JS API – http://developer.longtailvideo.com/contributors/nyboe/JW_API_xmpl_2-1-2-0.html

Up Down

JW Player

User  
0 rated :

How about in version 5.2 or beta 5.3, and in ActionScript? I want to only resize the video content, so that my plugin can "wrap" around it like a frame.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You would have to modify the player’s source to do this, then.

This question has received the maximum number of answers.