Large logo under the screeen Commercial version - Demo 3 / 6

Introduction

Here is a highly pimped commercial setup. It displays a large company logo behind the canvas and the video screen is gradually animated over it so that the logo has enough time to display. Also, remember to right-click the player and select "Acme menu 1.0.0" to see a custom menu action.

Logo configuration

The logo is placed behind the screen with the zIndex property as follows:

logo: {
		url: '/img/player/acme-gray.png',
		fullscreenOnly: false,
		zIndex:0,
		top: '45%',
		left: '50%'
	},

fadeIn/fadeOut animation

This example should actually be placed in the scripting demos, but here you'll see a glimpse of what is possible to do with the Flowplayer API and JavaScript:

clip: {

		autoPlay: false, autoBuffering: true,

		// let screen fade in gradually so Acme logo can be seen below it
		fadeInSpeed: 20000,

		// on last second, fade out screen
		onLastSecond: function() {
			this.getScreen().animate({opacity: 0}, 3000);
		},

		// if screen is hidden, show it upon startup
		onStart: function() {
			this.getScreen().css({opacity: 1});
		}

	},

CSS code

You can see a black box around the player. This is just normal CSS coding, as follows:

#box {
	background:#000 url(/img/global/gradient/h300.png) 0 0 repeat-x;
	width:500px;
	padding:15px 0;
	margin:20px auto;
	border:2px solid #FFFFFF;
	outline:#999999 solid 1px;
	-moz-outline-radius:4px;
}