Subtitles with FlowPlayer

I recently built a subtitling system for a site that I am working on: khristos.org

It uses FlowPlayer with the built in Captions Plugin.  The interesting part is that I also built an admin section where clients can add the subtitles on their own. Click the image below to see what it looks like. You can also check out the video here.

FlowPlayer Captions Admin Interface

What’s also interesting is a Mashable article that explains how you can add Captions to your YouTube videos.

With the rising popularity of this subject and videos on the web, I figured it would be a good chance to give back to the community that has taken me so far.

So give me some code already!

Here is a base table you can use for your Subtitles.  This is for MySQL, so adjust according to your needs and system.

CREATE TABLE `subtitles` (
`title_id` int(11) NOT NULL auto_increment,
`video_id` int(11) NOT NULL,
`subtitle` varchar(255) collate utf8_unicode_ci NOT NULL,
`begin` varchar(255) collate utf8_unicode_ci NOT NULL,
`duration` varchar(255) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY  (`title_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;


FlowPlayer Files:

If you haven’t already grabbed the FlowPlayer do so here.  As mentioned above, you will also need the Captions plugin, grab that here.  The last thing you will need that I found to be a little difficult to find the right one is the FlowPlayer Content SWF, you can acquire that here.

Video Page:

Note! Now some of your FlowPlayer files might be different as it updates throughout there years. So at the time of writing this and with the version numbers listed this did work at one point. I have also dumbed down some code to hopefully help the greatest amount of readers. You hopefully have MySQL Classes and such.

<?php
$video_id = (int) $_GET['id'];
$videoQRY = mysql_query("SELECT * FROM videos WHERE video_id = $video_id LIMIT 1");
$row= mysql_fetch_array($videoQRY);

$filename = $row['filename'];
$width = $row['width'];
$height = $row['height'];
?>

<div id="player" style="width:<?=$width?>px; height:<?=$height?>px;"></div>

<script src="/scripts/flowplayer-3.1.4.min.js" type="text/javascript"></script>
<script>
 window.onload = function() { 

 flowplayer("player", {src: "/swf/flowplayer-3.1.5.swf", wmode: "transparent"}, { 

 clip: {
   url: "/flv/<?=$filename?>",
   autoPlay: false,
   autoBuffering: true,
   fadeInSpeed:1000,
   captionUrl: "/xml/<?php echo $video_id>?>/subtitles.xml",
 },
 plugins: {
   captions: {
     url: "/swf/flowplayer.captions-3.1.4.swf",
     captionTarget: "subtitles",
     button: { width: 20, height: 15, right: 5, top: 5, label: 'CC' }
   },
   subtitles: {
    url: "/swf/flowplayer.content-3.1.0.swf",
    bottom: 20,
    width: '100%',
    height: 50,
    backgroundColor: 'transparent',
    backgroundColor: '#000000',
    backgroundGradient: 'none',
    border: 0,
    borderRadius: 0,
    textDecoration: 'outline',
    style: {
      'body': {
      fontSize: '15',
      fontFamily: 'Arial',
      textAlign: 'center',
      color: '#ffffff'
    }
   }
  },
  controls: {
    bottom:0,
    height:21,
    durationColor: '#ffffff',
    backgroundColor: 'transparent',
    backgroundGradient: 'low',
    progressGradient: 'medium',
    progressColor: '#96d355',
    bufferGradient: 'none',
    buttonOverColor: '#e57857',
    sliderColor: '#96D355',
    borderRadius: '0',
    timeColor: '#5b7c1b',
    bufferColor: '#FF8E40',
    sliderGradient: 'none',
    buttonColor: '#96d355',
    autoHide: 'always',
    hideDelay: '600000',
    play:true,
    volume:false,
    mute:true,
    time:false,
    stop:false,
    playlist:false,
    fullscreen:true,
    scrubber:true
   }
  }
 });
}
</script>

Explanations:

This line grabs the dynamic subtitle file.

captionUrl: "/xml/<?php echo $video_id>?>/subtitles.xml",

Create your dynamic subtitle folder by adding a RewriteRule to your .htaccess file.

RewriteRule ^xml/(.*)/subtitles.xml$ subtitles.php?id=$1 [L]

Create a php file called subtitles.php and insert the following code.

<?php
header('Content-type: text/xml');
echo "<?xml version="1.0" encoding="UTF-8"?>n"; 

$id = (int) $_GET['id'];
$subtitlesQRY = mysql_query("SELECT * FROM subtitles WHERE video_id = $id ORDER BY begin ASC");
?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/10/ttaf1" xmlns:tts="http://www.w3.org/2006/10/ttaf1#styling">
 <head></head>
 <body>
 <div>
 <? while($row = mysql_fetch_array($subtitlesQRY)) {  ?>
 <p begin="<?=$row['begin']?>" dur="<?=$row['duration']?>s">
 <?=stripslashes($row['subtitle']);?>
 </p>
 <? } ?>
 </div>
 </body>
</tt>

In the plugins section of the FlowPlayer code there is a section like below. As you can see there you can change the location of your CC button, or even call it something else.

captions: {
   url: "/includes/flowplayer.captions-3.1.4.swf",
   captionTarget: "subtitles",
   button: { width: 20, height: 15, right: 5, top: 5, label: 'CC' }
 },

In the sections below the captions node you have all the styles for your subtitles box and FlowPlayer SWF, I suggest spending some time playing around with the variables. If you know HTML this should be a no-brainer for you.  The current setting I have puts white text on a transparent black background.

subtitles: {
   url: "/includes/flowplayer.content-3.1.0.swf",
   bottom: 20,
   width: '100%',
   height: 50,
   backgroundColor: 'transparent',
   backgroundColor: '#000000',
   backgroundGradient: 'none',
   border: 0,
   borderRadius: 0,
   textDecoration: 'outline',
   style: {
     'body': {
     fontSize: '15',
     fontFamily: 'Arial',
     textAlign: 'center',
     color: '#ffffff'
   }
 }

There you have it. If you have any questions, comments or problems add a comment below.

Have fun and keep experimenting!