Match screen sizes to videos
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.11.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'
}
}
});