html5-media-synchronized-subtitles

Pure HTML5 synchronized subtitles and movie display:

• https://acdha.github.io/html5-media-synchronized-subtitles/demo.html
• http://chris.improbable.org/experiments/browser/video/html5-media-synchronized-subtitles/

Synopsis

1. A hidden element with the synchronized-subtitle-display class exists somewhere on the page with a data-player-id attribute pointing to a <video> element
2. Add <script async src="html5-media-synchronized-subtitles.js"></script> to the page
3. When the async JavaScript loads, it registers event handlers for the subtitle <track> loading
4. Browsers which support WebVTT will load the track and parse it
5. JavaScript creates an ordered list of track cues so the entire transcript may be displayed
6. As the browser fires timeupdate events on the video, cues which overlap in time have the CSS class highlighted added and the scrollTop property of the cue list will be updated. If jQuery is present, the scrollTop change will be animated.

Notes & Browser Compatibility

Customization

Set the data-cue-element-callback attribute on the .synchronized-subtitle-display HTML element to the name of a global variable and it will be called with each element created for a track cue, allowing you to customize the display. The default behaviour is to replace the <br> generated by IE11 with spaces so the cues can be styled using display: inline without line-breaks which cannot be overridden using CSS.

Browsers

• Safari 7 on OS X:
  • The standard subtitle controls will set the track state to disabled when the user deselects it, which will stop triggering cuechange events. We could solve this by listening for change events on the track list and resetting the mode to hidden but since Firefox doesn't support cuechange yet there's limited benefit.
• Safari on iOS 7: ok
• Chrome: ok
• Firefox:
  • WebVTT is currently unsupported prior to Firefox 31
  • cuechange events are not yet dispatched: https://bugzilla.mozilla.org/show_bug.cgi?id=996331
  • The demo will not work in Firefox on OS X until H.264 support ships
  • Unlike other browsers, the content returned by getCueAsHTML will be wrapped in a <div>
• IE11:
  • <track> is only supported on Windows 8
  • <track> does not load cross-origin and does not support the crossorigin attribute: https://connect.microsoft.com/IE/feedback/details/817222/ie-11-unable-to-load-captions-cross-domain-with-track
  • the subtitles must have the standard text/vtt MIME type
  • The content returned by getCueAsHTML will have newlines replaced with <br> tags