/* screen: { width:387, height:231, top:55, right:77 } Display properties Display properties define a plugin's placement, size and visibility on the player canvas. If you are familiar with CSS you will feel at home with them. Each display property can be specified as an an absolute value or as a percentage (relative to the total player canvas size). Percentages are applied to the centre of an element, for example, top:50% applied to an element means that the element is vertically centered no matter how high the canvas is. It is good to bear in mind when specifying dimensions that Flowplayer has a fullscreen mode and, when this is activated, the overall dimensions of a particular plugin will be larger. property / type default description -------------------------------------------------------------------------------- bottom / string Specifies the position at which the plugin should be placed as the distance from the bottom edge of the layer. Overridden by the top property. height / string 100% The height of the plugin. If this value is not supplied, the height is scalable, and the plugin will use all available vertical space in both normal and fullscreen mode. left / string 0 Specifies the position at which the plugin should be placed as the distance from the left-hand edge of the layer. Overrides the right property. opacity / decimal 1.0 Specifies the initial transparency of the plugin. Accepts a decimal value between 0.0 (invisible) and 1.0 (no transparency), or a percentage from 0% to 100%. right / string Specifies the position at which the plugin should be placed as the distance from the right-hand edge of the layer. Overridden by the left property. top / string 0 Specifies the position at which the plugin should be placed as the distance from the top edge of the layer. Overrides the bottom property if it is supplied simultaneously. width / string 100% The width of the plugin. If this value is not supplied, the width is scalable, and the plugin will use all available horizontal space in both normal and fullscreen mode. Note that above properties can be animated with the aid of animate method in the scripting API. This is one of the beauties of Flowplayer. Display properties can be changed at runtime in an animated manner, thus giving your users a richer movie experience. You can, for example, animate the video screen into the top left-hand corner, while at the same time revealing other plugins on the right-hand side of the screen - just like YouTube does when you click their menu button. Flowplayer goes much further though. It gives you the flexibility to perform arbitrary animations to any or all plugins inside the player. You can also load plugins on-the-fly during playback. The following display properties can be set in the configuration but cannot be animated. In addition, they can be both set and changed at runtime by means of the Plugin's css() method. property / type default description -------------------------------------------------------------------------------- display / string block This property should have the value block if the plugin is to be shown or none if it is not. The default is block. zIndex / integer Where there are many, potentially overlapping elements on the canvas, this property specifies the order in which they are rendered. Elements with higher numbers appear above those with lower numbers. By default this property is 0 for the video screen, while plugins are assigned an index according to the order in which they are configured. (The first plugin has an index of 1, the second an index of 2, and so on.) This means that all plugins are placed over the video screen by default. If you want to alter their order you can manually specify indexes using this parameter. It is therefore possible to add plugins to the canvas below the video screen, and for them to be shown only when the video screen is resized or moved out of the way. */ // Component for instantiated flow player screen // http://flowplayer.org/documentation/skinning/ function _smFlowPlayerScreen () { } _smFlowPlayerScreen.prototype = { // configuration variables and default values flowPlayerComponent : null, initialWidth : 452, initialHeight : 340, initialTop : 0, initialLeft : 0, initialize : function (flowPlayerComponent) { this.flowPlayerComponent = flowPlayerComponent; if (typeof this.flowPlayerComponent.configuration.screen == 'undefined') this.flowPlayerComponent.configuration.screen = {}; }, setFlowPlayer : function (flowPlayer) { // XXX: should this set this.flowPlayerComponent ? this.flowPlayerInstance = flowPlayer; }, setDimensions : function(width, height) { this.width = width; this.height = height; }, noteInitialDimensions : function(height, width) { this.setDimensions(width, height); }, setOffset : function (left, top) { this.left = left; this.top = top; }, noteInitialOffsets : function(top, left) { this.setOffset(left, top); }, setLeftOffset : function(left, display) { if (this.left == left) return; this.left = left; this.flowPlayerComponent.configuration.screen = { width: this.width, height: this.height, top: this.top, left: this.left} if (typeof display == 'undefined' || display) this.flowPlayerComponent.displayFlowPlayer(); }, setWidth : function(width) { this.width = width; }, setHeight : function(height) { this.height = height; } };