This is a message.

Show closed captions (CC) for videos

You can supply the Captions information as an external text file or embed them inside a mp4 container.

The above demo shows Captions from a SubRib file. You will need a recent version of Flash installed to view this video, a H.264 encoded mp4 file. The first subtitle comes after 13 seconds.

Closed Captioning is a term describing several systems developed to display text on a video screen to provide additional or interpretive information to viewers who wish to access it. The most common use is to provide subtitles for movies. See here for more info.

Features

  • Loading subtitles from the Timed Text or Subrip format files.
  • Styling text from styles set in the Timed Text format files.
  • Loading of subtitles from embedded FLV cuepoints.
  • Loading of subtitles from embedded subtitles tracks in MP4 files.
  • Controls an external Content plugin to show the cuepoints.

Timed Text is a W3C specification for delivering captioning and video description for the web. You can find the spec here in the W3C site.

SubRip is a common format for distributing Captions for DVD rips. It is the native subtitle format of the SubRip program.

SubRip example

The following shows the javascript code that's used in the above demo:

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
log: { level: 'debug', filter: 'org.flowplayer.captions.*' },
clip: {
 
url: 'mp4:buffalo_soldiers',
 
// this is the SubRib file with captions info
captionUrl: 'http://releases.flowplayer.org/data/buffalo.srt',
 
// we want to use RTMP since this is a 1,5 hour long movie
provider: 'rtmp',
 
// do not distort widescreen image in fullscreen mode
scaling: 'fit'
},
plugins: {
 
// the captions plugin
captions: {
url: "flowplayer.captions-3.2.10.swf",
 
// pointer to a content plugin (see below)
captionTarget: 'content'
},
 
// configure a content plugin so that it
// looks good for showing subtitles
content: {
url: "flowplayer.content-3.2.9.swf",
bottom: 25,
height:40,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
},
 
// streaming plugin configuration
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
},
 
// change default skin to "tube"
controls: {
url: "flowplayer.controls-tube-3.2.16.swf"
}
 
},
canvas: {
backgroundGradient: 'none'
}
});

JavaScript

Timed text example

<a class="player" id="timedtext">
<img class="button" src="/media/img/player/btn/showme.png" />
</a>

HTML
$f("timedtext", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
url: 'http://stream.flowplayer.org/flowplayer-700.flv',
 
// this Timed Text obeys the old spec
ttNamespace: "http://www.w3.org/2006/10/ttaf1",
// this is the Timed Text file with captions info
captionUrl: "/demos/standalone/plugins/flash/tt.xml"
},
plugins: {
 
captions: {
url: "flowplayer.captions-3.2.10.swf",
 
// pointer to a content plugin (see below)
captionTarget: 'content'
},
 
// configure a content plugin to look good for our purpose
content: {
url: "flowplayer.content-3.2.9.swf",
bottom: 25,
width: '80%',
height:40,
backgroundColor: 'transparent',
backgroundGradient: 'low',
borderRadius: 4,
border: 0,
 
style: {
'body': {
fontSize: '14',
fontFamily: 'Arial',
textAlign: 'center',
color: '#000000'
}
}
}
}
});

JavaScript

The timed text XML file used in this example is shown below. You can see in the first xmlns declaration that it uses a different XML namespace than the default, and therefore ttNamespace must be configured explicitly.

The style definitions are in the first part of the file inside the head element and below that we have the Captions inside the body element.

The first caption does not include the style attribute and therefore the style used to render it comes from the styling settings used to configure our Content plugin. The second caption uses the style with id 1 that defines a white font and left text alignment. The third caption has a small font coming from the 2nd style referenced by its id 2.

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/10/ttaf1"
xmlns:tts="http://www.w3.org/2006/10/ttaf1#styling">
<head>
<styling>
<style id="1" tts:fontFamily="Arial" tts:fontSize="14" tts:color="#FFFFFF"
tts:textAlign="left" tts:fontStyle="Bold" />
<style id="2" tts:fontSize="10" tts:color="#000000" />
</styling>
</head>
<body>
<div xml:lang="en" >
<p begin = "00:00:00.01" dur="04.00">
First caption with default style coming from the Content plugin config
</p>
 
<p begin = "00:00:04.19" dur="04.00" style="1">
2nd caption with timed text styling to make the text white
</p>
 
<p begin = "8s" dur="04.00" style="2">
3rd caption using a small black font
</p>
</div>
</body>
</tt>

XML

Embedded Captions example

This example show Captions based on data included in cuepoints that are embedded in the video file. The cuepoints were embedded into the video using RichFLV. The first caption is at 6 seconds.

The file used in the example above has cuepoints at the following points of the timeline: 6000, 13500, 16000, and at 20000 milliseconds. Using the RichFLV application it's easy to add them. Each of these cuepoints has one parameter called text that contins the text displayed as the caption text.

<a class="player" id="embedded">
<img class="button" src="/media/img/player/btn/showme.png" />
</a>

HTML

$f("embedded", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
url: "http://stream.flowplayer.org/flowplayer_cues.flv",
 
// cuepoint timing is in milliseconds in the file, so override
// the default multiplier value of 1000 that converts seconds
// to milliseconds
cuepointMultiplier: 1
},
plugins: {
 
captions: {
url: "flowplayer.captions-3.2.10.swf",
 
// pointer to a content plugin (see below)
captionTarget: 'content'
},
 
// configure a content plugin to look good for our purpose
content: {
url: "flowplayer.content-3.2.9.swf",
top: 10,
width: '80%',
height:40,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
 
// an outline is useful so that the subtitles are more visible
textDecoration: 'outline',
style: {
'body': {
fontSize: '14',
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
}
}
});

JavaScript

MP4 Embedded Captions example

This example show Captions based on data included in subtitle tracks of a MP4 container. There can be several subtitle tracks in the video, and you can choose which you want to see displayed. You can filter the subtitle tracks thanks to the captionsTrackFilter property of your clip.

The select control uses JavaScript to change caption language dynamically. The selection affects the next caption to be shown after the change, the currently displayed caption is not changed.

The file used in the example above has 2 subtitle tracks and you can change the displayed subtitles track by simply updating the captionsTrackFilter property of the clip.

Note: When encoding MP4 videos with subtitle tracks make sure that you interleave the media and subtitle hint tracks tightly - especially when deploying via pseudostreaming. With MP4Box this can be achieved by passing the -tight option or an equivalent which your software provides.

<a class="player" id="mp4_embed">
<img class="button" src="/media/img/player/btn/showme.png" />
</a>
<select onchange="javascript:$f('mp4_embed').getClip().update(
{'captionsTrackFilter':'trackid='+this.value})">
<option value="2">English</option>
<option value="3">German</option>
</select>

HTML

$f("mp4_embed", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
url: 'http://stream.flowplayer.org/big_buck_bunny_with_captions.mp4',
// we want to display English by default.
// the English subtitle track index is 2. 0 is video, 1 is audio, 2 is English, 3 is German.
// you can filter on whatever field of the track you want, usually, you filter on trackid
captionsTrackFilter: "trackid=2"
},
plugins: {
 
captions: {
url: "flowplayer.captions-3.2.10.swf",
 
// the content plugin we use to show the captions
captionTarget: 'content'
},
 
// configure a content plugin to look good for our purpose
content: {
url: "flowplayer.content-3.2.9.swf",
top: 10,
width: '80%',
height:40,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
 
// an outline is useful so that the subtitles are more visible
textDecoration: 'outline',
style: {
'body': {
fontSize: '14',
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
}
}
});

JavaScript

Configuration

Here is a list of all Captions specific clip properties. These go under the clip node in the player configuration:

PropertyDatatypeDefaultDescription

captionUrl

string

 

Path to a Timed Text or SubRip Captions file.

showCaptions

boolean

true

Show Captions for this clip. You can set this to false if you have embedded Captions in the video and you don't want to show them.

captionTrackFilter

string

 

When using an embedded subtitle track from a MP4 container, use the captionTrackFilter filter to filter our unwanted subtitles.

It must be in the form of key=value and the plugin won't display subtitles that don't match that filter. Usually, captionTrackFilter looks like trackid=2 where 2 is the index of the subtitle track in the container. (0 and 1 are usually taken by the video track and the audio track).

ttNamespace

string

 

XML namespace of Timed Text specification. Defaults to http://www.w3.org/ns/ttml.

Here is a list of configuration options for the Captions plugin. These go under the Captions plugin node in the player configuration:

PropertyDescription

captionTarget

The name of a Content plugin configured to show the Captions. The plugin needs to be specified in the player's initial configuration.

template

Used with embedded cuepoints. A template string that specifies tokens for names of cuepoint parameters. The tokens are replaced by values that are looked up from the cuepoint parameters.

If you embed cuepoints where the subtitles are in the cuepoint parameter called subtitle, you should set the use of a template with the value '${subtitle}'.

button

Display properties for the CC-button. The default properties are: { width: 20, height: 15,right: 5, bottom: 30, label: 'CC' }.

Specify null and the button is not shown at all. The label property in this object specifies the label text for the button. If you want to make the captions initially hidden, specify display: 'none' in the Content plugin that is used to show the captions. Once the CC button is clicked, the captions visible.

Scripting

The captions plugin has the following custom methods that can be used at runtime:

MethodExampleDescription

hideButton()

Hides CC widget.

loadCaptions(
             clipIndex,
             captionURL,
             fileExtension)

loadCaptions(0, 'captions.xml')

Loads captions for the specified clip. The fileExtension is an optional parameter and you should specify it if the captionURL does not contain a file extension that can be used to recognize the caption file format. The supported fileExtension values are 'txt' and 'srt'.

showButton()

Shows CC widget.

Download

Get latest version of the Flowplayer Captions plugin.

flowplayer.captions-3.2.10.swf

just the working flash file to get you going

flowplayer.captions-3.2.10.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.captions-3.2.10-src.zip

source code

Please right-click and choose "Save link as..." (or similar)

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.