Gecko and vtt.js
After three weeks of coding the initial patches and nearly two months of review, Nightly finally plays basic WebVTT captions again! If you'd like to see a demo you can head over to my previous blog post where I put together one.
Gecko Integration Setup
The set up of our integration of vtt.js into Gecko is fairly simple.
First, we have a WebVTTParserWrapper
that allows us to wrap a
vtt.js parser. It implements the nsIWebVTTParserWrapper IDL
which allows us to work with the
WebVTTParserWrapper (that was implemented in JS) in C++.
Secondly, we have a WebVTTListener class which primarily does two things:
- Listens to the data stream of an
HTMLTrackElementand passes the data to the
WebVTTParserWrapperto be parsed.
- Receives parsed
vtt.jsand adds them to the
WebVTTParserWrapperis written in JS we need to define an IDL that the
And that's pretty much it for our current integration of
vtt.js into Gecko. Since
implements the parsing section of WebVTT and the DOM tree construction of rendered subtitles, there
is very little we need to add. To get the DOM tree represenation of a
cue we can just call
vtt.js, get the
div containing the DOM tree, and add it to the video's caption overlay.
The next major step for WebVTT in Gecko is to get what's called the WebVTT processing model
implemented. This is the section of the spec that positions the
cue on the video with respect
cue-settings that have been applied to the
Work on that has already begun, and after some major hurdles having to do with the spec being
vtt.js now applies horizontal or vertical positioning depending on the text orientation of the cue.
We've yet to integrate that into Gecko though. We still need to finish the part of the processing model that accounts for
overlap avoidance, i.e. positioning
cues so that they don't overlap eachother. After that we can start preparing
a patch to get that functionality into Gecko.
comments powered by Disqus