This is a message.

Dynamic resizing

Learn how to dynamically resize your player

Praesent accumsan. Donec erat. Integer gravida ligula id enim. Donec nibh enim, rutrum scelerisque, sagittis quis, ullamcorper non, tortor. In ac lorem. Sed pharetra, metus vitae pulvinar luctus, turpis quam elementum felis, at malesuada lacus felis ac orci.

Aenean ac elit. Sed vitae velit. Nulla sodales vehicula mi. Donec imperdiet, libero in elementum varius, leo arcu tincidunt urna, in facilisis justo sem id urna.


Praesent accumsan. Donec erat. Integer gravida ligula id enim. Donec nibh enim, rutrum scelerisque, sagittis quis, ullamcorper non, tortor. In ac lorem. Sed pharetra, metus vitae pulvinar luctus, turpis quam elementum felis, at malesuada lacus felis ac orci.

Aenean ac elit. Sed vitae velit. Nulla sodales vehicula mi. Donec imperdiet, libero in elementum varius, leo arcu tincidunt urna, in facilisis justo sem id urna.


Praesent accumsan. Donec erat. Integer gravida ligula id enim. Donec nibh enim, rutrum scelerisque, sagittis quis, ullamcorper non, tortor. In ac lorem. Sed pharetra, metus vitae pulvinar luctus, turpis quam elementum felis, at malesuada lacus felis ac orci.

Aenean ac elit. Sed vitae velit. Nulla sodales vehicula mi. Donec imperdiet, libero in elementum varius, leo arcu tincidunt urna, in facilisis justo sem id urna.


standalone demo

In this demo we will handle those events to dynamically resize the player. A small version of the splash screen is shown initially. When it's clicked, the player is resized to its full width and height. After being played or another splash is clicked, the player resumes its original state. This kind of user interface is suitable for listings and other situations where you don't have much room to display your videos.

Configuration

Each player is configured with following HTML snippet: 

<a class="player"
    style="background-image:url(/media/img/demos/1m.jpg)"
    href="http://stream.flowplayer.org/KimAronson-TwentySeconds59483.flv">
    <img src="/media/img/player/btn/play.png" />
</a>

HTML

Each player container has a custom background image and the video file to be played is (again) given in the href attribute. All players are initialized with a single Flowplayer configuration where our functionality is placed under three event listeners onBeforeClick, onUnload and onFinish. We are resizing the container element with jQuery before and after the Flash component is loaded. Here is the actual code that runs on this page: 

$f("a.player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
 
    // perform custom stuff before default click action
    onBeforeClick: function() {
 
        // unload previously loaded player
        $f().unload();
 
        // get wrapper element as jQuery object
        var wrap = $(this.getParent());
 
        // hide nested play button
        wrap.find("img").fadeOut();
 
        // start growing animation
        wrap.animate({width:406, height:303}, 500, function() {
 
            // when animation finishes we will load our player
            $f(this).load();
 
        });
 
        // disable default click behaviour (player loading)
        return false;
    },
 
    // unload action resumes to original state
    onUnload: function() {
        $(this.getParent()).animate({width:190, height:150}, 500, function()  {
 
            // make play button visible again
            $(this).find("img").fadeIn();
        });
    },
 
    // when playback finishes perform our custom unload action
    onFinish: function() {
        this.unload();
    }
 
});

JavaScript