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)

 

<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>
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.