With nearly 15 billion plays each month globally, JW Player understands that our customers’ wide-ranging, diverse audiences are key to any successes in the ever-expanding world of online video. In some industries, especially for our customers in the public sector, video captions are even the law. Whether for accessibility or for multi-language support, video accessibility has become table stakes for anyone serious about online video.
Making video captions easier to implement opens up more online video for all viewers that rely on them. With this in mind, we recently undertook a project to make caption editing a smoother and simpler part of our users’ workflows.
Some of our Platform customers may be familiar with the “get captions” feature in their dashboards — with the click of a button, they could send away a video to be captioned by an automated service, and within 48 hours have that caption sent back to the video. Nice!
One little hitch, though — automated captions often contain errors. Currently, to edit a captions file (including any previously-uploaded captions), a user would have to download that file, edit it with a text editor on their own machine, and re-upload it. Not the smoothest experience.
Making Captions Even More Accessible
Knowing we could definitely improve on that workflow, we set out to create a tool that would allow a user to edit their caption files quickly and easily. We also knew that down the line, we might be interested in different types of video track editing (like chapters, ad breaks, and more!), so we wanted this tool to be flexible enough for future purposes as well.
We didn’t have to reinvent the wheel with this concept — caption editors are out there, and companies like YouTube have done a nice job of making an intuitive interface with which to make those edits. The editors we looked at in our research all had the same basic features: a video preview window, a space to view captions in a list, and a space to view captions on a timeline that corresponded with the video preview. We chose to keep it fairly close to what our users might already be accustomed to.
Caption Editing Technology
Getting started on this project technically was exciting; we could look forward to interesting new HTML5 technologies like Local Storage, Text Tracks, and the Audio API. Caption editors, while others exist, aren’t so commonplace as to be simply executed. We built our Caption Editor almost entirely from scratch, utilizing third party libraries and a variety of interesting tricks within Angular itself. In our case, we relied on a combination of the HTML5 Audio API, local storage, and a waveform generator library to create a smoothly interconnected piece of technology.
One of the greatest technical challenges of this process was aligning each of the page’s separate elements to one another as the video was playing. There were 7 distinct elements including multiple seekbars, a waveform, the video preview, and the captions boxes, whose logic and visuals needed to be synchronized. Angular provides an excellent framework to put all of these together in a page, but making use of the very different models to tie everything together took a lot of patience and diligence.
We were able use HTML5’s easy-to-use video tag for its frame-accurate seeking. This results in a vast improvement over Flash, both in performance and in user experience. (If you’re interested, check out this writeup about the HTML5 video tag and how JW Player uses it.)
We also made the decision to keep all of this information in local storage, which allowed us to create a seamless environment where a user could see their changes in real time—without slowing down for individual adjustment calls that would otherwise interrupt the editing flow. So, we keep everything locally until a user is finished making all their adjustments. Overall, we made every effort to keep the caption editor’s user interface streamlined, simple, and intuitive.
Try it Out!
Our final product is an intuitive interface for the video caption editor that is the result of heavy collaboration between design, product, and engineering. A user can add captions, edit existing captions, jump to editing a specific caption and jump to different points in the video—and all 3 sections of the interface are smoothly synchronized the whole way. The editor even gives intelligent feedback about caption length and format — so that you don’t accidentally set captions beyond the length of the video, or add an incorrectly formatted time code.
Right now, the editor handles uploaded captions files, but pretty soon a user will be able to create a caption track from scratch, typing as they watch through the video.
We hope you like it! If you’re not already a user, sign up free today to test it out.