jPlayer resize

[rootsical]

I am using 2.0.0.35 in order to take advantage of resizing but I was wondering how to dynamically resize the player.  I want to implement fullscreen (to size of browser I know) but I am not using the css demo files, and so I am using my own css/div structure completely.  The jplayer container I am using is called "videoPlayer".  I am now using the constructor options to set the initial size ie.

size: {

    width: "640px",

    height: "360px"

}

I was hoping that later I could do this:

$("#videoPlayer").jPlayer("size", {width: "1024px", height: "576px"}) ; 

or something similar in order to resize to a bigger size or to the size of the browser window..

If not I wondered if I could add this in the constructor:

sizeFull: {

    width: "1024px",

    height: "576px"

}

and then call this function $("#videoPlayer").jPlayer("option", fullScreen, true) and it would resize to the sizes defined in sizeFull.  

Is this possible, or is there a simple way to resize without having to modify my div structure/css to conform to the demos? if not, no worries..  thankyou

[Mark Panaghiston]

You seem to be thinking on the right lines.

The size and sizeFull option objects define the size in each mode and then you can change the fullScreen option to switch between the two.

Note that there is also a cssClass property in the size object, which is a class switched onto the cssSelectorAncestor element.

The size affects the jPlayer div, the poster and video areas.

[rootsical]

thank you - the problem was that I was using the wrong jPlayer code to set the fullscreen option.. it should have been:

 

$("#jPlayerSelector").jPlayer("option", {"fullScreen": true});

 

so in my case:

 

$("#videoPlayer").jPlayer("option", {"fullScreen": true});

 

and NOT: $("#videoPlayer").jPlayer("option", fullScreen, true) as I previously thought.
  

now it works - having set the size and sizeFull options in the constructor as follows:

 

size: {
   width: "640px",
   height: "360px"

  },
  sizeFull: {
   width: this.windowWidth,
   height: this.windowHeight
  },

 

where the windowWidth and windowHeight variables were set as so:

this.windowWidth = window.innerWidth + "px";
this.windowHeight = window.innerHeight + "px";

 

thank you.. all seems to work a treat..
  

[Mark Panaghiston]

Ah yes, I missed that.

The option method works in a lot of ways, with a new option hash like you used or in this way:
$("#jPlayerSelector").jPlayer("option", "fullScreen", true);

[Rohit Avasthi]

Hello,

I am using jPlayer 2.0.0. and I want to add resize button on the player by using that button I can maximize/minimize player like YouTube and other players are working.

Can I do this. If any one have any idea can he please share here.

Thanks & Regards
Rohit Avasthi

[Mark Panaghiston]

jPlayer 2.0.0 does not support resizing. The original system dreamt up for 2.0.0 was flawed as the CSS is not read in as the actual CSS rule, but as the computed value in pixels. The new system started getting implemented in 2.0.3 and has been polished up a few times since them.

We will be releasing 2.1 soon, but in the meantime, you can look at the 2.0.32 demo area, which has this feature implemented.
http://jplayer.org/2.0.32/demos/

I suggest that you read this post here as it contains more details on 2.0.32:
https://groups.google.com/d/topic/jplayer/UreK_2C6bYI/discussion

[rootsical]

Hi Rohit, hope I can be of help..  As Mark said, you need to use a more recent version of jPlayer than 2.0.0 so download that first..

I use jQuery so I have an onReady function like so..

$(document).ready(onReady);

I also set up some global variables which contain the width and height of the browser window for you to resize to fullscreen.  I also have a variable which will be true

when it is fullscreen and false when it isn't...

//global variables to hold browser window width and height info

var windowWidth;

var windowHeight;

 

//global boolean variable to hold whether you are in fullscreen or not. Set to false to begin with..

 var isFullscreen = false;

Then in your onReady function first you set the window size.  Then you can construct jPlayer. You can also listen for a window resize event so that if a user resizes the window, we can change to the new size whilst in fullscreen. You don't have to do this but I did. Here is an example of my onReady function...

 

function onReady () {

  

  //here you set your variables above with the window width and height

  windowWidth = $(window).width() + "px";

  windowHeight = $(window).height() + "px";

  

  //this listens for a window resize event and then handles by using the onWindowResize function

  $(window).resize(onWindowResize);

  

  //this is the jPlayer constructor where you will also set the media etc.. Here I am just showing the relevant bits for fullscreen/resize

  $('#videoPlayer').jPlayer(

  {

   //Size you want jPlayer to start with - I used 640px by 360px but obviously you can choose your own

   size: {

  width: "640px",

   height: "360px"

   },

   //Size of jPlayer when you go fullscreen

   sizeFull: {

   width: windowWidth,

   height: windowHeight

   }

  });

}

 

By the way, when I use "#videoPlayer" I am referring to your jPlayer div in the html - you might have called it something else. 

 

Also, note that for the onWindowResize function I used, I downloaded a jquery resize plugin from here:

http://benalman.com/projects/jquery-resize-plugin/

You can just include it in your html head just like you include jQuery/jPlayer. This script takes care of a problem where different browsers trigger sometimes more than one event each time that the user resizes the browser. It will stop your onWindowResize function from being called too many times and with odd results.  All you have to do is include the script and it will take care of everything. And here is an example of the onWindowResize function I used...

 

function onWindowResize() {

  //only one event fired per resize due to the resize script being added

  //http://benalman.com/projects/jquery-resize-plugin/

  

  //reset the windowWidth and windowHeight variables to the new width/height of the window

  windowWidth =$(window).width() + "px";

  windowHeight = $(window).height() + "px";

  

  if (isFullscreen === true)

  {

   //resizing whilst in fullscreen

   //this is the important bit, you are telling jPlayer to redefine the fullscreen dimensions and then change to these new fullscreen dimensions

   $("#videoPlayer").jPlayer("option", {"fullScreen": true});

   

   $("#videoPlayer").jPlayer(

   {

    //redefines the jPlayer fullscreen dimension (width and height)

    sizeFull: {width: windowWidth, height: windowHeight},

     

    //change to the new fullscreen dimensions

    option: {"fullscreen": true}

   });

  }

  else

  {

   //if you are not in fullscreen then you don't care about the resize event

  }

 }

Then in your html you can have div or other element that will be your resize button and using jquery you can capture the click event.  You can then define a handler function for when someone clicks, for example the following function which checks if the isFullscreen variable is true or not and then resizes accordingly. This function I called onFullscreen, and here is an example...

 

function onFullscreen () {

  if (this.isFullscreen === false)

  {

//not fullscreen so going to fullscreen

 

//this is the important bit, you are telling jPlayer to change to the fullscreen dimensions you defined earlier in the constructor

$("#videoPlayer").jPlayer("option", {"fullScreen": true});

//Note: you will also have to use css to resize any divs which jPlayer is inside of.  I use jQuery to do this by using either the addClass or css functions. Check the jQuery documentation for these if you don't know them

 

//as you are now fullscreen set the isFullscreen variable to true

isFullscreen = true;

  }

  else

  {

   //fullscreen already so going to come out of fullscreen

   

   //again this is the important bit you are telling jplayer to come out of fullscreen back to the original size

   

   //as you are no longer in  fullscreen set the isFullscreen variable to false

   isFullscreen = false;

  }

 }

Hope that helps..  It worked for me anyhows.. Good luck..

[Rohit Avasthi]

Hello Mark & Rootsical,

Thank to both of you to replay me. I am trying both of your suggestion hop any of this will work for me. I will replay after trying this.

[Naveen Mohan]

Hi Rootsical,

i am having a issue with making the jPlyer to play in the full screen when the Jplayer is playing video in the popup window.

I am defining the  sizeFull: {

                width: windowWidth,
                height: windowHeight
            },

in a constructor when i am initializing the Jplayer instance.  but when ever i click on the full screen button i am taken the to the window full screen and not the page full screen.

kindly can you help me with this.

i am pasting my code here for reference

$(document).ready(function(){

   
     //here you set your variables above with the window width and height
      windowWidth = $(window).width() + "px";
      windowHeight = $(window).height() + "px";   
     

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                m4v: decodedURL
            }).jPlayer("play");
        },
        swfPath: "http://www.jplayer.org/2.1.0/js/",
        supplied: "m4v",

        size: {
                width: "640px",
                height: "360px"
            },

            sizeFull: {
                width: windowWidth,
                height: windowHeight
            },

            option: {"fullscreen": true}
    });
   
    $("#jquery_jplayer_1").jPlayer("option", {"fullScreen": true});
});

Kindly help me in this regards...