This is a message.

Canvas - The larger picture

Inform Flowplayer about the environment

standalone demo

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 positioning the screen, the control bar and the other plugins exactly the way we like, we can provide a completely 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

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="splashPlayer" href="http://stream.flowplayer.org/N8inpasadena-Flowers457.flv"
style="width:700px;height:378px;display:block">
 
<!-- nested splash image -->
<img src="/media/img/demos/helloworld.jpg"
alt="Canvas background demo" />
</a>

HTML

Javascript

You can see how the canvas background configuration and screen positioning are set up below:

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

JavaScript

You can see the entire Javascript code below. It involves the content plugin configuration and some animation. They are mainly there for illustrating the possibilities to provide an amazingly interactive movie watching experience.

$f("splashPlayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",  {
 
plugins: {
 
// controlbar settings
controls: {
backgroundGradient: 'none',
backgroundColor: 'transparent',
all:false,
scrubber:true,
mute: true,
height:40
},
 
// content plugin settings
content: {
url: "flowplayer.content-3.2.9.swf",
width:260, height:200, top:20, left: 20,
backgroundGradient:'none',
borderRadius:30,
padding: 15,
body: {fontSize:20},
html: 'This time you have a large canvas to play with.' +
'Remember that you can use all the powerful positioning' +
' and animation possibilities.'
}
},
 
// canvas background
canvas: {
backgroundImage: 'url(/media/img/demos/helloworld.jpg)'
},
 
// screen positioning inside "Hello world" screen.
screen: {
width:387, height:231, top:55, right:77
},
 
// animation example for content plugin
clip: {
onCuepoint: [5000, function() {
var plugin = this.getPlugin("content");
 
plugin.setHtml("").animate({height:40, width: 450}, 2000, function() {
 
// here animation is finished
this.css("padding", 7);
this.setHtml("Just THINK about all the possibilities");
})
}]
}
 
});

JavaScript