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.
- 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.
- 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:
Timed Text Markup Language (TTML) 1.0Child information items [children] are reduced to only element and character information items. Contiguous character information items ar...- 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.
. @cyberdees do you know anyone who knows if any browser implements DFXP w3.org/TR/ttaf1-dfxp/… ?
@makoto_inoue Perhaps either @torgo @codepo8 @brucel @thebeebs @Paul_Kinlan know or could at least point in the right direction…
@makoto_inoue I don't think it's supported. Does github.com/cgiffard/Capti… help? Maybe can be used with popcorn.js /cc @humphd @knowtheory
@makoto_inoue You should check out the universal subtitle project which uses popcorn.js and maybe talk to @maboa as well- To my surprise (sorry @thebeebs) , the ones currently supported are Flash and next version of IE(10)
@makoto_inoue @cyberdees @torgo @codepo8 @brucel @Paul_Kinlan We have a labs implimentation of TTML here html5labs.interoperabilitybridges.com/prototypes/vid… but that's it
@makoto_inoue it's in flash adobe.ly/tvDlYB and is a profile of TTML, which IE is planning to support bit.ly/oLYChm
HTML5 Video Captioning - IEBlog - Site Home - MSDN BlogsThe promise of HTML5 is a Web that works for everyone. Media accessibility through captioning is an important part of that promise and an...- 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.
- 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.
WebVTT
The output of the steps below is a set of CSS boxes that covers the rendering area of the media element or other playback mechanism, whic...- HTML5 Video WebVTT ExampleSample HTML5 code that makes use of a WebVTT file and playr to add subtitles to a video clip
- WebVTT is a text format to separate text context out of video elements. You can specify text in the format like belowWEBVTT FILE[idstring][hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms [cue settings]TextLine1TextLine2 ...
WebVTT and Video Subtitles | iandevlin.com - blogWith the web industry embracing HTML5′s ability to embed video in the browser, we need to take a further look at what the future holds fo...- It seems much simpler than DFXP, but looks do the job for our use case. How about the browser compability?
- 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.
- Again, not implemented yet, but there are a few emulation JS called "Playr" and "Captionator"
- cgiffard/Captionator - GitHubSimple closed-captioning polyfill for HTML5. Just 8KB when gzipped! You can see a demo of Captionator here: http://captionatorjs.com/demo...
