3 Steps to Add Closed Captions or Subtitles to Flowplayer

  • Important Update!

    Please see the updated Flowplayer support documentation

    Flowplayer

    Flowplayer is a popular web media player that rivals LongTail Video’s JW Player. It’s very configurable and supports many different media formats. This blog article shows you how to add closed captions or subtitles to Flowplayer with the help of 3Play Media.

    Step 1 – Download and Install the Flowplayer Files

    If you haven’t already set up your Flowplayer, follow this link, which will guide you through the steps of downloading the Flowplayer files, unzipping them, uploading them to your web server, and embedding the player on your site.

    Next, you need to download the following plugins, unzip them, and upload the files to the same location as your other Flowplayer files.

    Captions Plugin (flowplayer.captions-3.2.3.swf)

    This plugin reads the captions from an external file (SRT or Timed-Text (DFXP))
    Download it here

    Content Plugin (flowplayer.content-3.2.0.swf)

    This plugin displays the captions and lets you set the size, style, and position.
    Download it here

    RTMP Plugin (flowplayer.rtmp-3.2.3.swf)

    You only need to install this plugin if you intend to use the player with a RTMP streaming server.
    Download it here

    Playlist Plugin (flowplayer.playlist-3.0.8.min.js)

    You only need to install this plugin if you intend to use playlists.
    Download it here

    Controlbar Plugin (flowplayer.controls-3.0.2.min.js)

    You need to install this if you plan to use a playlist or if you want to customize the control bar.
    Download it here

    Step 2 – Create Your Closed Caption Files

    Log into your 3Play Media account, download SRT caption files, and upload them to your web server.
    If you haven’t set up your 3Play Media account, see the 3Play Media Quick Start Guide.

    Flowplayer captions or subtitles

    Step 3 – Publish the Embed Code to Your Site

    Below is a simple example of a HTML web page with a captioned Flowplayer. If you’re using RTMP, look at this example.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://area51.3playmedia.com/tole/flowplayer/flowplayer-3.2.6.min.js"></script>
    <title>Flowplayer demo</title>
    </head>
    
    <body>
    
    <!-- player container--> 
    <a
      href="http://area51.3playmedia.com/tole/home-page.mp4" 
      style="display:block;width:425px;height:300px;" 
      id="player">
    </a>
    
    <!-- Flowplayer installation and configuration -->
    <script language="JavaScript">
      flowplayer("player", "http://area51.3playmedia.com/tole/flowplayer/flowplayer-3.2.7.swf");
    </script>
    
    <script language="JavaScript">
    $f("player", "http://area51.3playmedia.com/tole/flowplayer/flowplayer-3.2.7.swf", {
    
      clip: {
        url: 'http://area51.3playmedia.com/tole/home-page.mp4',
        showCaptions: 'true',
        captionUrl: 'http://area51.3playmedia.com/tole/home-page.srt'
      },
    
      plugins:  {
    
        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'
              }
            }
        }
      }
    });
    </script>
    
    </body>
    </html>
    
    

    Flowplayer captions or subtitles

    Optional Configurations

    Additional settings for the captions plugin (scroll down to Configurations):

    Styling properties (part of the content plugin):

    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.

    As mentioned before, 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>
    
    

    Automated Workflow

    The captioning workflow can be completely automated with the help of 3Play Media APIs and Flowplayer APIs.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

View Pricing & Discounts