Ankul is a freelancer, technical writer, and developer from India. He loves to explore new opportunities and technologies with Android and other mobile platforms being his present muse. He is a co-founder and developer at scheduLAWyer, an Android app.
Video and audio are a mundane affair these days on the web. The internet isn’t simply text based anymore. Video contributes to almost 40% of search results. From a user’s point of view, multimedia is an interactive and amusing session. On the other hand, for a developer, enhancing the experience was an arduous thing to do until HTML5’s
<track>element came to the rescue.
After reading this article you’ll understand how to add timed media tracks like subtitles to your media files. Also, you’ll get to know how these add to the SEO value of the web page. Before moving ahead, you might want to go through an intro on HTML video and audio, explaining container formats, codecs, markup and the basics.
<track>element defines any text that you want to display along with the playing media file. Text may include
In other words, the
<track>element allows you to specify additional time-synchronized text resources that align with the
audioelement’s audio files timeline or the
videoelement’s video files timeline.
The track element is an empty element, i.e. it must not have a closing tag (meaning it’s a void element). It must be contained inside
<audio>tags. Also, if there is any
<source>element inside the video or audio tags, then the
<track>element should appear after the
For example:[code language="html"]
This attribute specifies the source address for the text file that contains the track data, and is naturally a required attribute. The value should be an absolute or relative URL. This means the files need to be put on a web server; the track element cannot be used from a file:// URL.