Playing with canvas background Skinning - Demo 5 / 10

Introduction

This time we are really getting creative with Flowplayer. On the canvas we will use this same background image as in our previous example. By using the possibility to position the screen, the controlbar and the other plugins the way we like we end up having a totally different video experience. Just use your imagination and think how you can use this same technique when designing your pages. Having a background image in the canvas is a strong tool for that. Click on the image to see what we mean! At the fifth second there will be an animation example.

HTML/CSS coding

Basic Flowplayer setup here. Splash image is the same image as the canvas background image. There is no external CSS settings involved.

<!-- large player container --> 
<a id="splash" href="http://blip.tv/file/get/N8inpasadena-Flowers457.flv"
	style="width:700px;height:378px;display:block">
	
	<!-- nested splash image -->
	<img src="/img/demos/helloworld.jpg" alt="Canvas background demo" /> 
</a>

JavaScript coding

Only relevant parts of the configuration are shown here: canvas background configuration and screen positioning. Other parts of the configuration can be seen from the standalone page. It involves the content plugin configuration and some animation. They are mainly there to show you the possibilities and can be removed.

// canvas background
	canvas: {
		backgroundImage: 'url(/img/demos/helloworld.jpg)'
	},
	
	// screen positioning inside "Hello world" screen.
	screen: {		
		width:387, height:231, top:55, right:77
	},