Using AJAX to load data from server Scripting - Demo 1 / 7
Introduction
This demo shows you how to load data from the server during playback. Here we have a playlist. Every time a clip starts we update the info area beside the video screen.
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.
HTML code
Our HTML code consists of a wrapper element for both the player and the info area and is styled with CSS.
<!-- black wrapper element -->
<div id="player_wrap">
<!-- player container -->
<div id="player">
<img src="http://static.flowplayer.org/img/player/btn/play_text_large.png" alt="Show me" />
</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>JavaScript code
The core part of our JavaScript is the onStart event which is registered for the common clip. This is called each time a clip starts in a playlist. It makes a server request with the jQuery load method. This request is sent with two request parameters that can be used on the server side. You can supply whatever arguments you like.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// common properties for each clip
clip: {
// all clips from the playlist come from blip.tv
baseUrl: 'http://blip.tv/file/get',
// 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/scripting/ajax-request.htm", {index: clip.index, url: clip.url});
/*
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-TwentySeconds64268.flv'
],
// some styling for the controlbar
plugins: {
controls: {
playlist: true,
backgroundColor: '#000',
height: 28,
backgroundGradient: 'low'
}
}
});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.htm", {adCode: clip.adCode});
}
}