You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Custom Fullscreen action with overlay JavaScript Tools - Demo 2 / 5

Example

Here we override the default fullscreen button behaviour with our JavaScript tools: overlay and expose. Press fullscreen button on the player and you can see the effect. Have you seen a feature like this before?


Description

This code is assembled so that you can define the fullscreen size by simply adjusting a single CSS width setting. Also note that you can use a custom background image for the fullscreen and define a custom color for the expose effect. These settings makes it easy to customize the visuals and "skinning" of this effect.

What happens on the code?

We are using onBeforeFullscreen event for the custom fullscreen action which does following things in order.

  1. launches overlay with expose effect
  2. pause the player and make it hidden while overlay "grows"
  3. disable fullscreen button on the controlbar when overlayed
  4. disables default fullscreen action by returning false

When overlay is closed following things occur in order

  1. place our player to the original size/position (position info is stored in variable)
  2. enable fullscreen button again
  3. unexpose (remove the darkened browser canvas)
Show this example as a standalone version. Look for the source code for details.

HTML code

Here is our HTML setup. 

<!-- container for the player  -->
<a id="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"></a>


<!-- element that is overlayed, visuals are done with external CSS -->
<div class="overlay"></div>

JavaScript: Flowplayer installation

Player is installed with custom fullscreen action and when player is loaded it's original position is saved. 

// install flowplayer on the container
$f("player", "http://releases.flowplayer.org/swf/flowplayer.commercial-3.2.7.swf",  {

	// our fake fullscreen action.
	onBeforeFullscreen: function()  {

		// 1. launch overlay
		overlay.load();

		// 2. pause the player and make it hidden while overlay "grows"
		this.hide().pause();

		// 3. disable fullscreen button when overlayed
		this.getControls().enable({fullscreen:false});

		// 4. disable normal fullscreen action by returning false
		return false;
	},

	// when ESC is pressed above the player, "fullscreen" is closed
	onKeyPress: function(key) {
		if (key == 27) {
			overlay.close();
		}
	},

	// in this case, use the commercial version for a change
	key: '#$7162d2d730cf607ac6d',

	// some basic visual setups
	clip: { scaling: 'fit'},
	canvas: {backgroundGradient: 'none'}

});

JavaScript: Overlay setup

When overlay is loaded the player is positioned over it. 

// setup overlay
var overlay = $(".overlay").overlay({

	// use the Apple effect for overlay
	effect: 'apple',	
	
	// 1. start expose effect when overlaying begins
	mask: '#123448',
	
	fixed: false,

	// 2. when overlay is loaded, we reposition and resize the player on top of it
	onLoad: function() {

		// get handle to the embed element
		var embed = $("#player :first");

		/* and reposition / resize it. you will propably have to tweak
			these when placing this on your site */

		var el = this.getOverlay();
		var height = el.height();

		embed.css({
			// size
			width:parseInt(el.width()) -80,
			height:parseInt(height) -80,

			// position
			left: parseInt(el.css("left")) + 40,
			top: parseInt(el.css("top")) + 40
		});

		// while overlay was growing we were in the paused state
		$f().resume();
	},

	// when overlay closes
	onClose: function() {

		// 1. return our player to its original size/position
		$("#player :first").css({top: null, left: null, width: null, height: null});

		// 2. enable the fullscreen button again
		$f().getControls().enable({fullscreen:true});
	}
	
}).data("overlay");

CSS code

NOTE. When Flowplayer is playing it is possible to move and resize it while it is playing. This requires that the container is initially relatively or absolutely positioned. If you move your player with JavaScript by changing it's position from static to relative for example the playback starts from the beginning. 

/* overlay size and background image */
.overlay {

	/*
		THIS ARE YOUR FULLSCREEN DIMENSIONS
	*/
	width:800px;
	height:600px;
	background-image:url(http://static.flowplayer.org/img/overlay/petrol.png);
	display:none;
	padding: 0 !important;
}

/* close button for overlay */
.overlay .close {
	background:url(http://static.flowplayer.org/img/overlay/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px;
	width:35px;
	height:35px;
	cursor:pointer;
}

/* original size of the player */
#player, #player_api {
	height:250px;
	width:415px;
	display:block;
}

/* absolute positioning of the player */
#player_api {
	position:absolute; 
	
	/* layer as the topmost element */
	z-index:10000; 	
}