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.18.swf", {
 
// common properties for each clip
clip: {
 
// all clips from the playlist come from blip.tv
baseUrl: 'http://edge.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