Exposing videos with a custom mask

Expose demo 4 / 5 : Exposing videos with a custom mask

Here we have customized the overlay mask with our imaginary corporation's logo. Click on the video and you can see it above the video. We have also customized the close effect on the expose by giving it a fierce magenta colored "flash" effect. Click on the following video and wait for it to finish (or press the ESC key).

CSS code

By default, the expose tool uses the id "exposeMask" for the mask. You can customize it by simply adjusting its CSS properties. Here are our customizations for this demo:

#exposeMask {
	/* use a custom background color and image on the mask */
	background:#123 url(http://static.flowplayer.org/img/player/acme-gray.png) 50px 366px no-repeat;
}

HTML code

This time we are exposing our video player and it's the only relevant HTML code. The player is surrounded with an additional box that is styled with a black background color and gradient. The styling is, of course, done with CSS:

<div class="black box" id="player_wrap">
	<a id="player" href="http://flowplayer.org/video/flowplayer-700.flv">
		<img src="http://static.flowplayer.org/img/player/btn/play_text_large.png" alt="Show me" />
	</a>
</div>

Expose configuration

We have tweaked quite a lot of the configuration variables and each one is commented. We have also set two callback functions onBeforeClose and onBeforeLoad to achieve the magenta colored "flash" effect when the exposing closes. Note that the player is paused when the exposing is closed. Upon construction, the expose API is returned by enabling the api variable. We use this variable in the Flowplayer configuration below:

/* here is the exposing part of this demo */
var expose = $("#player").expose({

	// return exposing API
	api: true,


	// use our customized mask
	maskId: 'exposeMask',

	// mask shows only 10% of the content through
	opacity: 0.9,

	// close expose slowly
	closeSpeed: 'slow',

	// we only want to close exposing when playback is finished
	// (or the ESC button is pressed)
	closeOnClick: false,

	// when the mask closes, alter its background color
	onBeforeClose: function() {
		this.getMask().css({backgroundColor: '#b8128f'});
		$f().pause();
	},

	// when the mask loads again, use the original background color
	onBeforeLoad: function() {
		this.getMask().css({backgroundColor: null});
	}
});

Flowplayer configuration

Here we call the load and close methods of the Expose API at the proper places:

// install flowplayer.
$f("player", "/swf/flowplayer-3.1.5.swf", {

	// when playback starts, perform exposing
	onStart: function() {
		expose.load();
	},

	onResume: function() {
		expose.load();
	},

	// when playback finishes, close the expose
	onFinish: function() {
		expose.close();
	}

});