This is a message.

Match screen sizes to videos

Learn how to gracefully change the screen size based on the video

standalone demo

Flowplayer makes it easy to adapt your screen size to the video size with a nice animation. This demo shows the player's animation engine in a real-life situation. We have a playlist where each clip in the playlist is played with a different sized screen. When a clip starts playing the screen size is adjusted according to the size of the clip.

Configuration

The trick is to use custom properties in each playlist clip. Those custom properties are used in the onStart event listener on the common clip - which is called for each clip in the playlist. Look at the events documentation for more information.

Note: In reality you would be using the width and height values that are available in the video metadata. You can access these with clip.metaData.width and clip.metaData.height. Here we are not using these as we were lazy and did not bother to encode different sized videos just for this demo.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
// custom properties "w" and "h" specify screen dimensions
playlist: [
{url: 'KimAronson-TwentySeconds58192.flv', w:430, h:310},
{url: 'KimAronson-TwentySeconds59483.flv', w:460, h:335},
{url: 'KimAronson-TwentySeconds63617.flv', w:390, h:300}
],
 
// common clip
clip: {
 
// this onStart event is triggered for all clips in the playlist
onStart: function(clip) {
 
// resize the screen based on the custom clip properties
this.getScreen().animate({width: clip.w, height: clip.h}, 3000);
},
 
// all clips come from the same location
baseUrl: 'http://stream.flowplayer.org',
 
// make all clips shorter so we can see the effect better
duration: 5
},
// initial screen size and position
screen: {
width: 460,
height: 250
},
 
plugins: {
controls: {
left: '50%',
width: 430,
fullscreen: false,
backgroundColor: '#cccddd'
}
}
 
});

JavaScript