The state of adding subtitle on HTML5 video

One of my clients is interested in adding accessible and multi language subtitles on videos. Here are my finding.


  1. I was initially searching with the word DFXP(Distribution Format Exchange Profile). Apparently  it's one of the document profile type to express TTML (Timed Text Markup Language) for Videos on web.
  2. 4.1 DFXP Content DFXP Content is an abstract document type of a profile of the Timed Text Markup Language intended to be used for interchange among distribution systems. This document type is defined in terms of the element and attribute vocabulary specified in 5 Vocabulary. This specification defines two types of normative schemas that may be used to validate a subset of conformant DFXP Content document instances:
  3. Whenever we talk about shiny new web standards, the first question we come up is "which browser it's been supported"? I googled for about an hour and found nothing, so I turned my effort into twitter.
  4. To my surprise (sorry @thebeebs) , the ones currently supported are Flash and next version of IE(10)
  5. We wanted to test a scenario were multiple formats are used to gather more feedback, so we built the demo in such a way that both TTML-1.0 and WebVTT can be used. WebVTT originated from W3C discussions last year after a need for simple caption authoring was identified. TTML is already an established standard for full-featured video captioning and supported in Adobe Flash and Microsoft Silverlight. It is used on Netflix, Hulu and other sites that display broadcast content.
  6. I finally found the answer about DFXP. The answer is "not yet". So I turned my focus to WebVTT which is also mentioned in the IE blog.
  7. WebVTT is a text format to separate text context out of video elements. You can specify text in the format like below

    [hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms [cue settings] 
    TextLine2 ...
  8. It seems much simpler than DFXP, but looks do the job for our use case. How about the browser compability? 
  9. Browsers Unfortunately none of the major browsers currently support WebVTT but there are a few JavaScript polyfills out there that you can use at the moment to take advantage of its features. I have used the excellent Playr by Julien Villetorte , although there are others out there such as Captionator by Chris Giffard.
  10. Again, not implemented yet, but there are a few emulation JS called "Playr" and "Captionator"