https://github.com/acdha/html5-media-synchronized-subtitles

Pure-HTML5 synchronized subtitles and movie display
https://github.com/acdha/html5-media-synchronized-subtitles

Last synced: 2 months ago
JSON representation

Pure-HTML5 synchronized subtitles and movie display

• Host: GitHub
• URL: https://github.com/acdha/html5-media-synchronized-subtitles
• Owner: acdha
• License: cc0-1.0
• Created: 2014-07-01T16:35:37.000Z (over 10 years ago)
• Default Branch: gh-pages
• Last Pushed: 2024-10-21T20:37:15.000Z (3 months ago)
• Last Synced: 2024-10-22T15:17:56.660Z (3 months ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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 `` element

2. Add `` to the page

3. When the async JavaScript loads, it registers event handlers for the subtitle `` 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 `
` 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 `
`

-   IE11:

    -   `` is only supported on Windows 8

    -   `` 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 `
` tags