Exposing videos with a custom mask

Here we have customized the mask with a 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).

standalone demo

CSS code

By default, the Expose tool uses the id "mask" 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(/media/img/global/player/acme-gray.png) 50px 366px no-repeat;
}

CSS

HTML code

This time we are exposing our video player and this is 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://blip.tv/file/get/KimAronson-TwentySeconds6421.m4v">
    <img src="/media/img/global/player/btn/play_text_large.png" alt="Show me" />
  </a>
</div>

HTML

The configuration

We have tweaked quite a few 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 we call the load and close methods of the Expose API at the proper places:

// install flowplayer.
$f("player", "/media/swf/flowplayer/flowplayer-3.2.7.swf", {
 
	// when playback starts, perform exposing
	onStart: function() {
 
		$("#player").expose({
 
			// mask lets 20% of the content show through
			opacity: 0.8,
 
			// 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() {
				$f().pause();
				this.getMask().css({backgroundColor: '#b8128f'});
			},
 
			// when the mask loads again, use the original background color
			onBeforeLoad: function() {
				this.getMask().css({backgroundColor: null});
			}
		});
	},
 
	onResume: function() {
		$.mask.load();
	},
 
	// when playback finishes, close the expose
	onFinish: function() {
		$.mask.close();
	}
 
});

JavaScript