Allow size of the stage to be set by the size of the content and not just by CSS

  • Hi all

    This follows on from my question in this thread.


    I'm coming from a situation where I have previous experience using and embedding other media players such as the video player "jwplayer" and the photo player "slideshow pro", usually using 16:9 media. These players can make their size automatically fit their media (and control bar) because the media that is loaded into them already has a fixed ratio and is designed to be displayed at that ratio. The media we load into krpano, of course, has no particular default playback ratio.

    My aim is to display a krpano viewer that appears to have fixed aspect ratio media because then the player will behave more similarly to other players that users are familiar with. I want to display the panos at 16:9 both because that aspect ratio is familiar to users, and also because it keeps the aspect ratio the same when in full screen mode on 16:9 monitors which are becoming more and more common.

    It may be possible to achieve all of these results using native javascript or jQuery.

    However, for a more integrated solution that could benefit other pano producers would you be willing to consider the following feature request:


    - Create a new XML attribute for the "view" element called e.g. "aspectratio" which can be used to set the playback aspect ratio of the pano. It is the same concept as defining the (area.width / area.height), but is semantically more appropriate.

    - The value of "view.aspectratio" could be set to e.g. the string "16:9". Krpano would parse the string for the two numbers, then height would then be calculated as (width / 16) * 9.

    - I originally considered allowing value of "view.aspectratio" to be a number e.g. "calc:16/9", but as the result of that example is "1.7777" recurring, there is a increased danger of rounding errors.

    - The purpose of the new attribute would be to make krpano behave as if it had loaded a fixed aspect ratio media item, like a video or photo, and in this situation the size and proportion of the stage could be defined by its content, whereas at the moment if height is set in CSS as "auto" the stage has no height even if we define height in area.height.

    - I would suggest that the value given for "view.aspectratio" should override those defined for the "area" element if there is any conflict.

    - Then e.g. if only width (not height) has been set in CSS, krpano would use the value of "view.aspectratio" to set the height of the viewer (taking into account area padding etc.) and visa-versa.

    - e.g. if a krpano viewer has CSS {width: 800px, height: auto}, has "view.aspectratio" as "calc:16/9", and "area.bottom" is "50" (for a control bar), then krpano would set the stage size to be 800x500.

    - If both width and height have been set in CSS, then the size of the pano may have need to be constrained.

    - In this case, you could allow the player to use the full width and height of the DIV container. You would then have black (or whatever colour your STAGE background is) space either to the sides or above/below the media (depending on whether is width or height constrained). If you had one, a 100% width control bar with parent STAGE (i.e. below the pano's "area"), would spread out to 100% of the container DIV's width.

    - Or, alternatively, you could have the player fit the content. There would be no black space, and if you had a 100% width control bar, it would have the same width as the pano.

    - Ideally, for this situation you would allow both options by adding another attribute e.g. string "stagefit", with values "content" or "container".

    - Again, the key to my feature request is allowing the size of the stage to be defined by the size of the content, and not just by the CSS values as it currently is.


    Obviously, I don't know how difficult it would be to implement this sort of thing, and you may know a much simpler method of achieving the same result, but I thought I would just make the suggestion and see what you think.

    Thanks for taking the time to read my lengthy post!

    David

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!