Since the implementation of FCC mandate for internet closed captioning, producers, TV stations, and video websites alike are looking for the best options. These days, HTML has evolved to be more functional with standardized guidelines for video rendering and captioning guidelines. In the past, there were no standards for playing a video on a web page. To play videos on a website almost always required plugins; such as QuickTime, Silverlight, RealPlayer, Flash Player etc. HTML5 has now improved and standardized accessible video and provides captioning to be displayed together. Companies like Aberdeen have incorporated this advancement in their day-to-day operations and provide the most up-to-date technical services to their clients.

As mentioned above, HTML5 is a major leap for standardizing video across web browsers and devices, and consequently simplifying closed captioning. The idea is that web video should be based on an open, universal standard that works everywhere. HTML5 natively supports video without the need for third party plugins.

There are two groups collaborating on HTML5 closed captioning standards: the Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C). Each group has its own CC standard. WHATWG has developed WebVTT (Web Video Text Tracks) and W3C has developed TTML (Time text markup language). These two standards are of different origins. WebVTT is basically a modified SRT; and TTML is a modified XML. However, I found that the old fashion .srt and .xml files will work just perfectly fine for subtitling and/or closed captioning.

Believe it or not, the code is very simple to incorporate in all types of videos and cc files. Below is a sample of HTML5 code to show how to incorporate the videos and closed caption file:

<video  width="320" height="240">
<source type="video/mp4" src="my_video.mp4" >
<track src="cc_file.srt" label="English captions" kind="captions" srclang="en-us" default >
</video>

Here are the attributes of the track elements:

src: specifies the name and location of the cc or subtitle file
label: specifies the title of the track
kind: specifies the type of time-aligned text. The options are: Captions, Subtitles, Chapters, Descriptions or Metadata
srclang: specifies the language
default: specifies that this track is enabled by default. Note that multiple track elements can be used simultaneously.

The next question that comes to mind would be if HTML5 can handle multiple languages. The short answer is YES, definitely. We just have to modify the code to include the track for different subtitle language files. If you subtitle multiple languages, just contact a company like Aberdeen and they will surely help you get your subtitle project going with files that work seamlessly for HTML5!

About the Author

Arif Kusuma is the Chief Technical Officer at Aberdeen Broadcast Services. He has his Bachelor's degrees in Chemical Engineering and Computer Information Systems, as well as a Masters of Business Administration. He has a passionate drive for technology, both hardware and software, and like many people, loves to be the first to get the latest gadgets.