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.
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
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.
Step 4 - Click Quick Download
Click the Quick Download icon located above the text of your translation.
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. 
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>
0 Comments