Captions

Subtitles for your videos.

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.16.swf", {
    log: { level: 'debug', filter: 'org.flowplayer.captions.*' },
    clip: {
 
        url: 'mp4:vod/demo.flowplayervod/buffalo_soldiers.mp4',
 
        // 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: "http://releases.flowplayer.org/swf/flowplayer.captions-3.2.9.swf",
 
            // pointer to a content plugin (see below)
            captionTarget: 'content'
        },
 
        // configure a content plugin so that it
        // looks good for showing subtitles
        content: {
            url: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.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: "http://releases.flowplayer.org/swf/flowplayer.rtmp-3.2.12.swf",
            netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
        },
 
        // change default skin to "tube"
        controls: {
            url: "http://releases.flowplayer.org/swf/flowplayer.controls-tube-3.2.15.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.16.swf", {
    clip: {
        url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv',
 
        // this is the Timed Text file with captions info
        captionUrl: "/demos/standalone/plugins/flash/tt.xml"
    },
    plugins:  {
 
        captions: {
            url: "flowplayer.captions-3.2.9.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.8.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. 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.16.swf", {
    clip: {
        url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/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.9.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.8.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.16.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.9.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.8.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:

Property	Datatype	Default	Description
`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).

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

Property	Description
`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:

Method	Example	Description
`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'.

Download

Get latest version of the Flowplayer Captions plugin.

flowplayer.captions-3.2.9.swf	just the working flash file to get you going
flowplayer.captions-3.2.9.zip	working flash file (swf) + README.txt and LICENSE.txt
flowplayer.captions-3.2.9-src.zip	source code

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

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 in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.

Show closed captions (CC) for videos

Features

SubRip example

Timed text example

Embedded Captions example

MP4 Embedded Captions example

Configuration

Scripting

Download

Found a bug?

Download this plugin