Displaying subtitles with captions plugin Flash plugins - Demo 4 / 14
Introduction
Our Captions plugin can be used provide subtitles for movies. Following demos displays subtitles in a 1.5 hour video. Video is in MP4 format so you need a Flash version greater than 9.0.115. Your version is . The first subtitle comes after 13 seconds.
JavaScript coding
This example uses three different plugins:
- captions plugin that reads the captions from an external fil
- content plugin is used to display the captions. this can be styled and positioned in a way you want.
- RTMP streaming plugin is used so you can jump anywhere in the timeline. The use of a streaming plugin is suitable here because the video is over 1.5 hours long. You can find more information about streaming plugins later on this demo area.
Here is our JavaScript configuration
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
clip: {
// here is our high quality movie
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'
},
plugins: {
// the captions plugin
captions: {
url: 'flowplayer.captions-3.2.3.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.0.swf',
bottom: 5,
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.3.swf',
netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
},
// change default skin to "tube"
controls: {
url: 'flowplayer.controls-3.2.5.swf'
}
}
});
Take a look at a standalone version of this demo. View its source code to get things going on your page.