This is a message.

Video Captions

Subtitles for your movies

standalone demo

The Captions plugin can be used to provide subtitles for movies. The following demo displays subtitles in a 1.5 hour video. The first subtitle comes after 13 seconds.

Configuration

The example uses three different plugins:

  • The Captions plugin which reads the captions from an external file
  • The Content plugin is used to display the captions. It also allows the captions to be styled and positioned in any way you want.
  • The RTMP streaming plugin is used so you can jump anywhere in the timeline. The use of a streaming plugin is recommended here because the video is over 1.5 hours long.
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