Below is a simple example of a HTML web page that has a captioned Flowplayer with a playlist of two videos that are set up to play sequentially.
You will need to download and install the Playlist Plugin (flowplayer.playlist-3.0.8.min.js) as well as the Controlbar Plugin(flowplayer.controls-3.0.2.min.js)
<html>
<head>
<title>Flowplayer Demo with Captions and a Playlist</title>
<script src="http://area51.3playmedia.com/tole/flowplayer/flowplayer-3.2.6.min.js"></script>
<script src="js/flowplayer.controls-3.0.2.min.js"></script>
</head>
<body>
<!-- player container-->
<a
href="http://area51.3playmedia.com/tole/home-page.mp4"
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- controlbar container -->
<div id="player" class="player"></div>
<script language="JavaScript">
window.onload = function() {
$f("player", "http://area51.3playmedia.com/tole/flowplayer/flowplayer-3.2.7.swf", {
// don't start automatically
clip: {
autoBuffering: true
},
// playlist with two entries
playlist: [
{ url: 'http://area51.3playmedia.com/tole/home-page.mp4',autoPlay: false, captionUrl: 'http://area51.3playmedia.com/tole/home-page.srt'},
{url: 'http://area51.3playmedia.com/tole/50lessons.flv', autoPlay: true, captionUrl: 'http://area51.3playmedia.com/tole/50lessons.srt'}
],
// disable default controls
plugins: {
controls: {
playlist: true
} ,
captions: {
url: 'http://area51.3playmedia.com/tole/flowplayer/flowplayer.captions-3.2.3.swf',
captionTarget: 'content'
},
content: {
url:'http://area51.3playmedia.com/tole/flowplayer/flowplayer.content-3.2.0.swf',
bottom: 25,
width: '80%',
height:40,
backgroundColor: 'transparent',
backgroundGradient: 'low',
borderRadius: 4,
border: 0,
textDecoration: 'outline',
style: {
'body': {
fontSize: '14',
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
}
}
// install HTML controls inside element whose id is "player"
}).controls("player");
//$f("player1").playlist("div.clips:first", {loop:true,playOnClick: false});
};
</script>
</body>
</html>