This is a message.

Show clip information using ajax

Use Flowplayer events to trigger ajax calls

Search engine friendly content

AJAX demo

Here we have a playlist consisting of four clips. Every time a clip starts we update this area with a data that is fetched from the server.

Click on the player to see it in action.


standalone demo

Here we have a playlist and each time a clip starts playing we update the info area beside the video screen.

HTML

Our HTML code consists of a wrapper element for both the player and the info area. 

<!-- black wrapper element -->
<div id="player_wrap">
 
    <div id="player">
        <img src="/media/img/player/btn/play_text_large.png"
                   alt="Search engine friendly content" />
    </div>
 
    <!-- updatable info area. -->
    <div id="info">
 
        <!-- some initial pseudo text (lorem ipsum) -->
        <h2>AJAX demo</h2>
 
        <p>
            Here we have a playlist consisting of four clips. Every time a clip starts
            we update this area with a data that is fetched from the server.
        </p>
 
        <p style="font-weight:bold">
            Click on the player to see it in action.
        </p>
 
    </div>
 
    <br clear="all" />
</div>

HTML

Javascript

The core part of our JavaScript is the onStart event listener which is registered for the common clip. This gets called each time a clip from the playlist starts playing. The listener makes a server request using the jQuery's load method.

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
 
    // common properties for each clip
    clip: {
 
        // all clips from the playlist come from blip.tv
        baseUrl: 'http://stream.flowplayer.org',
 
        // let clips last only 5 seconds so we can see the action more clearly
        duration: 5,
 

        // when clip starts, this function is called
        onStart: function(clip) {
 
            // load data from server. supply a few parameters.
            $("#info").load(
                 "/demos/standalone/scripting/ajax-request-" + clip.index  + ".html");
 
            /
                you can do different things for different clips. as an example
                we change the wrapper's background color
            /
            if (clip.index == 1) {
                $("#player_wrap").css({backgroundColor: '#347'});
            }
        }
    },
 
    // playlist of four clips
    playlist: [
        'KimAronson-TwentySeconds59483.flv',
        'KimAronson-TwentySeconds58192.flv',
        'KimAronson-TwentySeconds63617.flv',
        'KimAronson-TwentySeconds4461.flv'
    ],
 

    // some styling for the controlbar
    plugins: {
        controls: {
            playlist: true,
            backgroundColor: '#000',
            height: 28,
            backgroundGradient: 'low'
        }
    }
 
});

JavaScript

Customizing the code

You can supply custom properties for clips and use them as your request parameters. For example: 

// a custom property "adCode" on the playlist entry
playlist: [
    {url: 'my-video.mp4', adCode: '728KJ909'}
},
 
// send this code to the server
clip: {
    onStart: function(clip) {
        $("#info").load("ajax-request.html", {adCode: clip.adCode});
    }
}

JavaScript