Question

I have this code below:

      <script type="text/javascript">
           jwplayer("container").setup({
           flashplayer: "http://test.captive-portal.com/jwplayer/player.swf",
                        file: "http://content.captive-portal.com/files/video/cirque-du-soleil/mob.mp4",
                        image: "http://content.captive-portal.com/files/video/cirque-du-soleil/mob.jpg",
                        height: 285,
                        width: 480,
           });
      </script>

The whole page is here (in case you need it): video page.

What I’m trying to do is to change the 4 lines: file: (…), image (…), height(…) and width (…) depending of the resolution of the window. I have managed to do this with css, so styles are applied correctly, but this is javascript and I don’t really know how to modify it. I was trying to place 2 similar scripts on one page in divs and hide the small one in case of big screen or hide a big one in case of small screen but it didn’t work. Video didn’t play. I think this may be caused by some scripts in the flash player file.

Is there any way to set conditions for those 4 lines depending of the screen resolution?
Thank you very much for your help in advance.

Answer 1

Those parameters are simply an object.

So you should be able to create that object out of the jwplayer call, and simply pass it in. e.g

var params = {};
params.flashplayer = "http://test.captive-portal.com/jwplayer/player.swf";
if(!mobile){ //you need to handle checking for mobile devices
    params.file = "http://content.captive-portal.com/files/video/cirque-du-soleil/desktop.mp4";
    params.image = "http://content.captive-portal.com/files/video/cirque-du-soleil/desktop.jpg";
    params.height = 570;
    params.width = 960;
}else{
    //set params in same way but with mobile settings
}

jwplayer("container").setup(params);

If you later want to just resize the player. JwPlayer has a ‘resize’ function that you can call: jwplayer.resize(width,height)