smilText Popcorn Plug-in

This demonstrator uses a mix of styles and motion conventions to illustrate the options available in the W3C SMIL 3.0's timed text format. The demo uses a smilText JavaScript implementation bundled as a Popcorn plug-in. For more info refer to the SMIL 3.0 SmilText External Profile and the smilText JavaScript Project.

Welcome to this tour of New York, where we focus on the shapes of the city We start our tour with a ride on the famous Staten Island Ferry. The lines of the lower car deck provide a honeycomb pattern near the water. The artwork also flows

along the passenger loading platforms.
The engines start and all of the lines seem to move in different directions. As the boat pulls out, the arms of the passenger terminal wave goodbye. In Memoriam: September 11, 2001. Lower Manhattan stands defiantly, daring everyone to enter the City. Travel by train in New York brings to mind the old saying: getting there is half the fun... This is not the roller coaster at Coney Island -- it is the curve on the Flushing line. The next minute, the train enters a giant steel maze -- and we're the rat. Before you know it, we pull into the elevated station. Now we are on our own in the new world. People here don't live in 80-story high rises; they live in (very warm) four story walk-ups.

Any yes, walking up means walking up.

Using the smilText Popcorn plug-in:

<!-- Import Popcorn and smilText JS libraries: see source code -->
<script type="text/javascript" src="js/popcorn_smilText.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var pop = Popcorn('#video');

  // add a smilText container starting at 16 seconds
  pop.smilText({
    source: "smilText-source", // id of smilText container
    target: "smilText-target", // optional
    start: "16s",              // optional
    master: pop                // popcorn element
  });
  
  pop.play();
}, false);
</script>

<body>
  ...
  <smilText id="smilText-source" textFontSize="24" dur="6s">
    <tev begin="1.5s"></tev>
    We start our tour with a ride on the famous Staten Island Ferry.
    <clear begin="6s"></clear>
  </smilText>
  ...
</body>

Credits

This demo was created by Rodrigo Laiola at CWI. The artwork is an adaptation of the New York Geo demo that is bundled with the AMBULANT Player distribution.