XHTML and JavaScript for timed-text video display
I've spent the day writing and testing the code to use the JW FLV Media Player to display the Victoria 1907 video, while popping up timed text gobbets as a caption below it (or possibly beside it).
Writing the object to control the timed text display was relatively straightforward, and I had that going in an hour or so. It parses the page looking for all <dt>
and <dl>
elements, figures out their timing value, and stores the results in a list. Then it can display or hide appropriate items depending on a number of seconds, and a setting for the display window (length of time an item should be displayed).
What turned out to be much harder was hooking this into the media player itself. The player has a good JS API, but the documentation turns out to be less helpful than it looks, and it took a good while to figure out a way around a number of gotchas. These include:
- The API is non-functional on a local page; it only works when the code is on a server. This is supposed to be for security reasons.
- The
getUpdate()
function, which is the main method for getting information about the state of the movie, seems to tangle itself up when it's queried repeatedly before the movie file has finished loading, especially if you're trying to run other code during that phase. - My firewall was causing lockups when downloading the video file. It would stop downloading at less than 50% complete. This combined with the above problem such that they disguised each other, making debugging hard.
Eventually, I got an approach which works, even with a huge video. This involves two timers:
- One timer starts on load, and keeps checking (every second) the state of the movie (percentage loaded, and whether or not it's playing).
- When the first timer code detects that the movie is fully loaded and playing, it starts a second timer, and terminates itself.
- The second timer checks the elapsed time of the movie every second, and displays the text as required.
- These values are not retrieved by interrogating the player directly; instead, the player has a
getUpdate()
event which it calls periodically, and you add code in that event to store the values you care about in variables, which you can then access.
Now it's working, it should be even more robust with a smaller video file, and we can re-use it easily. My only slight worry is its reliance on another external file called swfobject.js
, maintained people other than the player's author, and the fact that the external file version (1.5) is out of date, but the current version (2.0) doesn't work with the player. We could end up with some version control issues there.