Announcing AS3-WebVTT

AS3-WebVTT is a set of ActionScript 3.0 utility classes which enable the parsing and sorting of standard WebVTT (.vtt) files for video captioning.

AS3-WebVTTdemo

Why write a WebVTT parser in AS3? Simple. A lot of video is still served with Flash Player or AIR – we certainly still use it extensively at the University of Denver. Recently, we’ve found the need to integrate captioning through a standard format across our video delivery tools. We settled on support for the WebVTT standard and now make our work available for everyone. Another example of web standards and Flash innovation working hand in hand!

So how is it used?

  1. Download the code and include it in your project.
  2. Import edu.du.captions.utils.CaptionsHandler – this is the only class you need to interact with from your application code.
  3. Create a new instance of the CaptionsHandler class: captionsHandler = new CaptionsHandler();
  4. You will need to stream a video, and create a text field for the captions to display in. This should be in your app already apart from the text object for captions support.
  5. Invoke captionsHandler.gatherCaptions(captionsPath); passing in string representing a .vtt file location. It will then be loaded, read, and parsed.
  6. Invoke captionsHandler.renderCaptions(CurrentVideoTime, TextFieldForDisplay); – passing in the current playback time of the video and the text field object whenever appropriate to render captions to the screen. You could use a Timer, for instance.

The video and text objects are completely under your control. Experiment with text positioning and format to get the desired results. You can see an example of all of this in the demo project.

If you do improve the classes – please contribute back to the project! Everything is pretty solid right now but there is always room for improvement. Some pieces of the WebVTT specification (such as alignment) are currently ignored by the parser.

You can find the source code along with a set of demos over at: https://github.com/du-otl/AS3-WebVTT

I’ve also recorded a video to show how this works in both a pure AS3 environment and with using the visual tooling in Flash Professional CC:

Proper Absinthe Preparation

Short video demonstrating proper absinthe preparation with some Jade PF1901 (2013 bottling). I use a glass dripper and standard pontarlier style glass with a 1 oz. reservoir in this video. The main reason for this video is to have something to work with and distribute alongside my soon to be released AS3-WebVTT library. It is to be released […]

absintheflash

Absinthe Infographic [built in flash professional]

It’s almost Hallowe’en in the United States. Invariably, a bunch of people will try absinthe for the first time at parties given its reputation as a “spooky” drink. This will probably involve either consuming absinthe as a “shot” or lighting it on fire, or both… THIS IS NOT THE WAY TO DRINK ABSINTHE! To help […]