Flowplayer: Using Captions in a Flowplayer Playlist

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)


<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>  
<!-- player container-->
<!-- 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: {
            bottom: 25,
            width: '80%',
            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"
  //$f("player1").playlist("div.clips:first", {loop:true,playOnClick: false});
Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk