Using a Flash component on the canvas Skinning - Demo 6 / 10
Introduction
This time we are getting to the extremes in skinning. 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 may want to make a "living" logo or organisms behind the movie. Whatever comes into your mind.
HTML coding
This part is simple. Just the player container.
<a href="http://flowplayer.org/video/flowplayer-700.flv" id="player"></a>CSS coding
The container is styled with following CSS snippet. Most notable 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(/img/global/gradient/h600.png) repeat-x;
text-align:center;
}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", "/swf/flowplayer-3.1.5.swf", {
// stop at first frame
clip: {
scaling: 'fit',
autoPlay: false,
autoBuffering: true
},
// "hello world" canvas background
canvas: {
background: '#000000 url(/swf/hello2.swf) no-repeat 30 10',
backgroundGradient: 'none',
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
}
});
Take a look at a standalone version of this demo. View its source code to get things going on your page.