This is a message.

Large logo under the screen

Another technique to showcase your brand

standalone demo

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: 'http://flash.flowplayer.org/media/img/player/acme-gray.png',
fullscreenOnly: false,
zIndex: 0,
top: '45%',
left: '50%'
},

JavaScript

fadeIn/fadeOut animation

In combination with the Flowplayer API & Javascript, the commercial version allows you to provide non-intrusive yet noticeable brand awareness in the player.

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: 0.8});
}
 
},

JavaScript

CSS

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

#box {
background:#000 url(/media/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;
}

CSS