Flowplayer: Add Closed Captions or Subtitles to Flowplayer

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 5- Click Request Download

Click on the Request Download button located above your list of files.

Request download for file

 

 

Step 6- Download the SRT file format

From the pop-up menu click the download icon for the SRT format.
After clicking the icon the file will immediately begin downloading to your computer.

Download SRT file

 

Step 7- Add the SRT file to your server

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

 

Step 8 – 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>

 

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk