Layout Additions for WebVTT

A few months ago I joined up with the other OSD700 students on the WebVTT feature for Firefox. Its purpose is display captions and subtitles for videos using the Track element. The main problem was that I wasn’t on the initial team that started the parser in OSD600, so I was a bit behind on what needed to be done. So I ended up choosing a portion of this feature that wasn’t directly related to the WebVTT parser.

I started out with a simple layout-related task. Add an anonymous div to the video element for the caption overlay. A bit of unfinished code was already done for this as a prototype by rillian (Ralph Giles). That prototype was unfortunately a year old, and a lot had changed in the codebase since that time. So, once things were up to date, I opened an issue on Bugzilla for it. Thankfully due to the bug’s specific nature, it only took some style changes and updating to actually get approval by roc (Robert O’ Callahan). Mozilla seems to have very strict rules on whitespace, and keeping style consistent, and I can admire that. Consistency definitely helps for readability.

And so I waited until it was time to get things together. A lot of parts started depending on each other to get a working prototype. So to rush for a prototype to show off, we started integrating our pieces, using Rick Eyres integration branch. We found out that getting all these things merged together and actually building would be an annoying task. Eventually, we ended up with something we could show. I changed up the css for the caption overlay so that it would be positioned correctly, and a little easier to look at, and we were ready to go. I added a text shadow instead of a black background, changed the font family/size, and changed the text colour to white.

We went to the Mozilla offices to show it off, and several of the students presented their own work on the feature. Several people from the Mozilla Toronto office also presented some of their own projects for the future of the web that looks very exciting. Some of the work on asm.js and WebRTC looks and sounds great.

Recently, I was tasked with giving another child div to each Text Track. The reasoning behind it was that positioning in the prototype wasn’t done properly (it would show below the video in 16:9 ratio). It used padding-top: 80% . While that would work when you knew the size of the video, it wouldn’t work any other time. If there was another child div, you could use the CSS trick where the outer div is relatively positioned, while the inner div is absolute positioned. That would allow you to place the inner div at the bottom of the outer one easily with bottom: 0, or an amount of exact pixels up you wanted it to be. So I positioned it just above the controls. This inner child div also allowed the caption itself to possibly be clickable, but the outer div to not be clickable.

I put these changes where the cue text was being appended to the caption overlay in WebVTTLoadListener. I could already see that was the wrong place to do that, but I might as well get things working first. I opened up a pull request to integration to see what I could change before it got in. There was an unforeseen issue with getting the pull request itself up. The fork of mozilla-central that I had from a year ago on github wouldn’t do pull requests anymore, it would just give me a 500 error. I tried waiting, I tried asking for help, but nobody seemed to have an answer to this issue. Eventually, I just renamed the repo, and forked another repository of mozilla-central on github instead. Then I pushed up my work again. This fixed it. For this patch, I put a member in TextTrack for the child div, and appended it as the cue text was appended. As I thought, it was the wrong place to be doing this. Rick Eyre was already preparing a patch that moved a lot of this logic to TextTrackCue. Once that was in, I put my patch for the child divs back in, this time as a member of TextTrackCue.  With that working, it gets merged in, and we’re one step closer to bringing everything together.