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://pseudo01.hddn.com/vod/demo.flowplayervod/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.11.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