This is a message.

Flash components on the canvas

Ultimate interactivity with flash components

standalone demo

We are using a SWF (Flash) file on the canvas background. Press the play button to see how video screen is placed on top of it.

You might want to make a "living" logo or some cool organisms behind the movie. Whatever comes to your mind.

HTML coding

This part is simple. Just the player container.

<!-- player container-->
<a href="http://stream.flowplayer.org/flowplayer-700.flv" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
</a>

HTML

CSS

The container is styled using the following CSS snippet. The most notable thing here is the background color that is tuned with a gradient PNG image.

/ wrapper defines canvas size by the aid of padding property /
#player {
display:block;
height:400px;
width:520px;
padding:20px 100px;
background:#123 url(/media/img/global/gradient/h600.png) repeat-x;
text-align:center;
}

CSS

JavaScript coding

Here comes the interesting part. We use a normal background property for the canvas. Only this time we reference to a SWF file instead of a JPG or PNG file. Very simple.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
// stop at first frame
clip: {
scaling: 'fit',
autoPlay: false,
autoBuffering: true
},
 
// "hello world" canvas background
canvas: {
// configure background properties
background: '#000000 url(/media/swf/hello2.swf) no-repeat 30 10',
 
// remove default canvas gradient
backgroundGradient: 'none',
 
// set up a light-blue border
border:'2px solid #778899'
},
 
// a little opacity so that the text is shown trough
screen: {
opacity: 0.8
},
 
// disable plugins. not our focus to learn here.
plugins: {
controls: null
}
 
});

JavaScript