The other day I landed the final patch to get positioning WebVTT in Firefox working. I'd like to share a demo today that I put together to showcase some of the different position settings that Firefox now supports. Note that you'll need to download Firefox Nightly for this to work correctly.

You can checkout the WebVTT file used to make this demo here.

Enjoy!

Thank you to Ali Al Dalla for the video ;-).

The part of the spec that deals with positioning WebVTT cues is called the processing model algorithm and it specifies where to position the cues based on the cue settings that the author has set for each cue and also how to avoid overlap if two or more cues overlap on the video. All this needs to be done manually—positioning boxes absolutely—because the algorithm needs to behave deterministically across browsers.

The algorithm gets the positions for the various cues from the cue settings which are:

• Position—The position from the cue box anchor to where the cue sits on the video.
• Size—The size of the cue in percent of the video.
• Line—The line position on the video; Can be a percent or integer value.
• Align—The text alignment of the cue.
• Vertical—Specifies vertical or horizontal text.

Checkout the cue setting portion of the spec if you'd like to know more about the various cue settings.

Interestingly enough the hardest part about implementing this part of the standard wasn't the spec itself, but getting the test suite working correctly. The main problem for this is that our test suite isn't hosted in Gecko, but in the vtt.js repo and the algorithm for positioning relies heavily on the positions of computed DOM elements. Since we aren't running the test suite in Gecko we don't have access to a CSS layout engine, which... was a problem.

I tried a lot of different solutions for getting the tests working in vtt.js and settled on running our test suite with PhantomJS. In the future we'd like to move it over to using something like Testling so that we can test vtt.js as a polyfill for older browsers at the same time.

Next up is getting some kind of UI that can control subtitles and the resource selection algorithm.

http://rickeyre.ca/2014/02/26/vtt-processing-demo.html