Just a quick post before I find a movie to stream on Netflix and ride out my Sunday …
First, the data model for a line of timed text in what I'm calling "st2" or "SAVS timed text" is now like this:
<span class="savs-st2" data-startTime="10" data-stopTime="13">My mistress' eyes are nothing like the sun </span>
Before, it was much clunkier, like this:
<p onclick="seekTo(10)" id="1"> <span class="savs-text">My mistress' eyes are nothing like the sun</span> <span class="savs-time">10</span> </p>
That's to say, now – using the HTML5 "data-" attribute – the demands for the HTML markup are far fewer given that the JavsScript file "savs.js" takes care of more.
I actually have thought about doing this as a jQuery plugin, but I'm not sure I see the point. Simply including the "savs.js" file is easier. By editing the "savs.css" file, one can control the look of their page. But I digress …
See, before I was thinking I'd write a PHP script that would build the page, etc, etc. but then I realized that "No, that's not my job." People should be able to store their timed data however they want, generate their HTML however they want, and only have to use the "savs.js" file and the "st2" data model to get this to work.
One also needs to give their HTML5 <audio> or <video> element an id of "savs-player" and also needs to put a tag somewhere in their HTML doc with an id of "savs-caption" a la:
That's where the captions go and it's currently required. If someone doesn't want to display captions, then they can just use CSS to hide that element.
Anyway, I'm not explaining anything well since I'm in a rush to watch a movie and have a soda, so here's the latest demo and below is the original version shown via a screencast.