Skip to main content

Flowplayer: Add Closed Captions or Subtitles to Flowplayer

Updated

Flowplayer is a popular web media player. It’s very configurable and supports many different media formats. This article shows you how to add closed captions or subtitles to Flowplayer with the help of 3Play Media. The captioning workflow can also be completely automated with help of 3Play Media's APIs and Flowplayer APIs.

 

Flowplayer Closed Captions Subtitles

 

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

Before downloading captions from your 3Play Media account you may want to first configure SRT as one of your favorite formats. Once saved as a favorite format the SRT format will be one of the default format options when performing quick downloads. 

See more information on configuring your Favorite Format settings.

Follow the steps below to get started...

 

Step 2 - Log into your 3Play Media account

3Play Media login

Step 3 - Select your file

Select the file associated with your video that you want to download from your list of files. When it has been selected, the box to the left of the filename will become checked and the line will become highlighted in blue.

Select file to download

Step 4 - Click Quick Download

Click the Quick Download icon located above the text of your translation.

Download subtitles to computer

Step 5 - Click SRT

From the drop-down menu that appears, click a Favorite Format and the translation will immediately download to your computer in the format selected. Click +Add Favorite Formats from the drop-down menu should your 3Play Media project not have any Favorite Formats configured yet. Download subtitles to computer

See more information on configuring your Favorite Format settings.

Step 6 - Add the SRT file to your server

Add the SRT file to your server and note the URL that correlates to its location. 

Step 7 – Publish the embed code to your site

Below is a simple example of an HTML web page with a captioned Flowplayer.
Note the CaptionURL that correlates to the SRT file on your server.
See more information if you are using RTMP. 

<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>

 

 

 

Related articles