HTML5 Video with Chapters

    After looking at the available tutorials, I've made some modifications that seem to work better. The main overhaul was changing the assumtion from there being only one video to assuming there would be multiple videos on the same website, same page, and possibly with captions that had the same time code.

    1. HTML5 Video with chapters
    2. The active chapter highlights itself
    3. Chapters that preceed the current chapter are highlighted slightly to show progress
    4. Captions account for <small> tags in the captions file

    Important: I compressed the hell out of this video. It's going to look crappy because it's as small as I could make it (15Mb).

    Other Key caveats

    This version does a better job of trying to figure out the correct video and caption your user is interacting with. The original file just found the first chapter element with the matching ID attribute (aka, the same start time) and assumed that the first one on the page would be the correct one.

    In this version, I assumed that with multiple videos on the same page, we might have the off-chance that 2 or more captions would have the exact same time codes, but there's a lower probability that they would also have the same matching text. So now the code not only compares the time, but it also compares the text of the cue to make sure it's got the right video and chapter to update.

    This is all still written in plain javascript. I love jQuery, but when I tried using it, it was actually causing more problems than it was solving in this case.

    If you have any other questions, I heavily commented the Javascript code.