Timed Text Markup (Subtitles) in HTML Video, Demo from W3C

video / webdev

A while ago, I stumbled across a demo in W3C website that lets you add really cool subtitles to a video.

It showcases how an implementation of Timed Text Markup Language (TTML) would look like.

If you aren’t familiar with Timed Text Markup (previously, Distribution Format Exchange Profile – DFXP), it’s basically a markup language that’ll allow you to add subtitles (annotations and more) to a video.

There are already few formats available to add subtitles, but this one uses the markup syntax.

Right now, the TTML spec is in W3C Recommendation status.

A really cool old demo of its use is still up in W3C site. Check it out: https://www.w3.org/2009/02/ThisIsCoffee.html

The subtitle file (in TTML) from the demo is here. And the script converting TTML to HTML in the demo is here.

View the demo in a desktop browser if your mobile browser plays website videos in a pop-up player and not on the page.

This is how the demo looks like:

Credit: Icon used in the post’s header image is by b farias, via Noun Project.


The Author

Web developer and writer. @rpsthecoder in Twitter.