This is a message.

Custom fullscreen action

Learn how to use a custom action for the full screen button in Flowplayer

standalone demo

Here we override the default fullscreen button behaviour with our JavaScript tools: overlay and expose. Press the fullscreen button on the player and you can see the effect.

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.

How does it work?

We are using the onBeforeFullscreen event for the custom fullscreen action which does the following things:

  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. disable default fullscreen action by returning false

When the overlay is closed following things occur:

  1. place our player to the original size/position (position info is stored in a variable)
  2. enable fullscreen button again
  3. remove expose (remove the darkened browser canvas)

HTML

<a href="http://edge.flowplayer.org/flowplayer-700.flv"
id="player"
class="player">
</a>
 
<!-- element that is overlayed, visuals are done with external CSS -->
<div class="overlay"></div>

HTML

Configuration

The player is installed with the custom fullscreen action. When it is loaded its original position is saved.

// install flowplayer on the container
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.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: '#$0875f2b961c5a9ff7e4',
 
// some basic visual setups
clip: { scaling: 'fit'},
canvas: {backgroundGradient: 'none'}
 
});

JavaScript

Overlay setup

When the overlay is loaded the player is positioned over it.

// set up 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: '', left: '', width: '', height: '', position: ''});
 

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

JavaScript

Styles

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 its 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(/media/img/overlay/petrol.png);
display:none;
padding: 0 !important;
}
 
/ close button for overlay /
.overlay .close {
background:url(/media/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:11000;
}

CSS