Text captions beneath the video?

9 replies [Last post]

Posted: Thu, 2008-02-07 09:54 Bri

Is it possible to have captions appear below the video instead of within the video? This would be essential for captioning video that already has some text information in the video itself (like training videos).

I'm thinking of something like an option that reports the current caption to JavaScript which could then set a text block below the video. Or even a more integrated solution where the player itself has a text block that appears below the video controls for the captions.

Is there a way to do this already, or is it something that might be added in the future?

Posted: Thu, 2008-02-07 13:05 streamBabie

Search the forums a bit and you will find several options for displaying extra text.

One method uses javascript and CSS to position the text anywhere you want it. The text can come from the annotation element of the playlist (good for images) or be read from the captions file for videos.

Another method uses a second media player positioned immediately below the first one which is showing the video. Proper sizing makes the control bars disappear and the second player then displays the captions below the video. Some simple javascript can start them in sync and keep them synced.

Not as nice, you could size the player to have black bars above and below the video and then the captions appear in the black bar. Of course, you have that black bar at the top, but you could always cover that up with a nice banner positioned over the player with CSS.

Have you checked andersen's [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/]DemoPage[/url]? He has some nice examples showing extra text displayed with various methods.

Posted: Wed, 2008-02-27 09:12 Deb

I have been looking for the same solution and checked out Andersen's DemoPage too... Could you please give an exmaple of the first method, i.e. using javascript and CSS to position text below the video control? If you could refer to any link in the forum, that would help... Many thanks in advance for spending your precious time!!!

Posted: Wed, 2008-02-27 10:41 streamBabie

This places the title over the image and creates a background for the text with four extra divs. If you don't want the background, get rid of the CSS, documentGetElementById, and divs related to title1, title2, title3, and title4. Position the title, change the font, etc., with the CSS for title0.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <title>Image Rotator - Title by CSS</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css" src="charset.css"></style>
  <style type="text/css">
    div.player
    {
      position:                     absolute;
      top:                              50px;
      left:                             50px;
      z-index:                             0;
    }
    div.title0
    {
      position:                     absolute;
      top:                             560px;
      left:                            150px;
      z-index:                             5;
      font-style:                     normal;
      font-variant:                   normal;
      font-weight:                       900;
      font-size:                         1em;
      font-family: "arial unicode ms", arial;
      color:                         #000000;
    }
    div.title1
    {
      position:                     absolute;
      top:                             559px;
      left:                            149px;
      z-index:                             1;
      font-style:                     normal;
      font-variant:                   normal;
      font-weight:                       900;
      font-size:                         1em;
      font-family: "arial unicode ms", arial;
      color:                         #c0c0c0;
    }
    div.title2
    {
      position:                     absolute;
      top:                             559px;
      left:                            151px;
      z-index:                             1;
      font-style:                     normal;
      font-variant:                   normal;
      font-weight:                       900;
      font-size:                         1em;
      font-family: "arial unicode ms", arial;
      color:                         #c0c0c0;
    }
    div.title3
    {
      position:                     absolute;
      top:                             561px;
      left:                            149px;
      z-index:                             1;
      font-style:                     normal;
      font-variant:                   normal;
      font-weight:                       900;
      font-size:                         1em;
      font-family: "arial unicode ms", arial;
      color:                         #c0c0c0;
    }
    div.title4
    {
      position:                     absolute;
      top:                             561px;
      left:                            151px;
      z-index:                             1;
      font-style:                     normal;
      font-variant:                   normal;
      font-weight:                       900;
      font-size:                         1em;
      font-family: "arial unicode ms", arial;
      color:                         #c0c0c0;
    }
  </style>
  
  <script type="text/javascript"src="swfobject.js"></script>
  <script type="text/javascript">
    var currentItem;
    var currentTitle;
    function getUpdate(typ, pr1, pr2, pid)
    {
      if(typ == 'item')
      {
        currentItem = pr1;
        setTimeout("getItemData(currentItem)", 100);
      }
    };
    function getItemData(idx)
    {
      var obj = thisMovie('mpl').itemData(idx);
      currentTitle  = obj['title'];
      document.getElementById('title0').innerHTML = currentTitle;
      document.getElementById('title1').innerHTML = currentTitle;
      document.getElementById('title2').innerHTML = currentTitle;
      document.getElementById('title3').innerHTML = currentTitle;
      document.getElementById('title4').innerHTML = currentTitle;
    };
    function thisMovie(movieName)
    {
      if(navigator.appName.indexOf('Microsoft') != -1)
      {
        return window[movieName];
      }
      else
      {
        return document[movieName];
      }
    };
  </script>
  <script type="text/javascript" charset="utf-8">
    function createPlayer()
    {
      var s1 = new SWFObject('imagerotator.swf', 'mpl', '423', '540', '8');
          s1.addParam('wmode',                   'opaque');
          s1.addVariable('file',                 'playlist.xml');
          s1.addVariable('width',                '423');
          s1.addVariable('displayheight',        '540');
        //s1.addVariable('overstretch',          'true');  // expands to fit h & v   "true"  -will stretch them proportionally to fill the display
          s1.addVariable('overstretch',          'false'); // expands to fit h or v  "false" -will stretch them to fit
        //s1.addVariable('overstretch',          'fit');   // expands to fit h & v   "fit"   -will stretch them disproportionally to fit both height and width
        //s1.addVariable('overstretch',          'none');  // displays native size   "none"  -will show all items in their original dimensions
          s1.addVariable('linkfromdisplay',      'true');
          s1.addVariable('useaudio',             'true');
          s1.addVariable('volume',               '80');
        //s1.addVariable('kenburns',             'true');
          s1.addVariable('transition',           'bgfade');
        //s1.addVariable('transition',           'blocks');
        //s1.addVariable('transition',           'bubbles');
        //s1.addVariable('transition',           'circles');
        //s1.addVariable('transition',           'fade');
        //s1.addVariable('transition',           'fluids');  //...fluids-OK
        //s1.addVariable('transition',           'lines');
        //s1.addVariable('transition',           'random');
        //s1.addVariable('transition',           'slowfade');
          s1.addVariable('shuffle',              'false');
          s1.addVariable('rotatetime',           '6');
        //s1.addVariable('showicons',            'true');
          s1.addVariable('shownavigation',       'true');
          s1.addVariable('javascriptid',         'mpl');
          s1.addVariable('enablejs',             'true');
          s1.addVariable('backcolor',            '0xAE0C00'); // face of buttons
          s1.addVariable('frontcolor',           '0x404040'); // button symbols & playlist text
          s1.addVariable('lightcolor',           '0x808080'); // highlighted playlist item
          s1.addVariable('screencolor',          '0xAE0C00'); // screen background color
          s1.write('player');
    };
  </script>
</head>
<body onload="createPlayer();">
  <div id="player" class="player" onMouseOver="thisMovie('mpl').sendEvent('next')">
    <a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Plugin</a> 
  </div>
  <div id="title0" class="title0"></div>
  <div id="title1" class="title1"></div>
  <div id="title2" class="title2"></div>
  <div id="title3" class="title3"></div>
  <div id="title4" class="title4"></div>
</body>
</html>

If you want a nicer effect and can execute PHP scripts on your server, check this demo: [url=http://willswonders.myip.org:8085/php/title_over_image.html]Title Over Image[/url], the text block is optional, the overlay can be positioned top or bottom, and you have full control over the fonts and the background. Plus, the overlay is part of the image, so it transitions WITH the image.