Now if you want to add additional information to your audio or video files, like for instance, subtitles, captions, descriptions, chapter titles, and metadata in-order to give your users a better experience, you will need to use the new <track> element for HTML5.
The <track> element allows you to add additional media tracks like for example, caption tracks and subtitle tracks, to be specified for the <audio> and <video> element's. So, in other words the <track> element allows you to specify additional time-synchronized text resources that align with the <audio> element's audio files timeline or the <video> element's video files timeline.
The <track> element is considered a void element also known as an empty element, which means that the <track> element must have a start tag, but must not have an end tag for HTML5 web pages. But for XHTML web pages all tags must be closed even void element's must be closed by adding a space which is optional and a trailing slash / to the end of the tag, for example <track src="captions.srt" /> in-order for the <track> element to validate in XHTML. You should note that the space added just before the slash is for backwards compatibility with older browsers.
The <track> element must be placed in between the <video> element's or the <audio> element's start tag and end tags, in other words the <track> element must be a child of the <video> element or the <audio> element. The <track> element must also be placed after the <source> element if present and before any flow content or phrasing content if present.
The <track> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?". The <track> element can also use the attributes kind, src, srclang, label and default. I will explain about these attributes in detail later on, after I show you how to code in the <track> element. But for now I will briefly explain the src attribute, since we will be using the src attribute in our first example and because its a required attribute. The src attribute will specify the location of the text track data.
Now let me show you how to code in the <track> element along with the src attribute for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<video>
<source src="video.ogv" media="screen, (color)">
<track src="captions.srt">
<p>This browser doesn't support the video element.</p>
</video>
</body>
</html>
And here is how to code in the <track> element along with the src attribute for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<video>
<source src="video.ogv" media="screen, (color)" />
<track src="captions.srt" />
<p>This browser doesn't support the video element.</p>
</video>
</body>
</html>
Now let me list and explain the <track> element's kind, src, srclang, label and default attributes below.
- kind
The kind attribute specifies the type of timed track file that is being used, in other words the kind attribute provides the browser with a clue about the type of data that the resource of the src attribute for the <track> element should be presented as.
The kind attribute is an enumerated attribute, which means that it has a set list of values also known as keywords that you can choose from, which include the subtitles, captions, descriptions, chapters and metadata values. I will explain about these values below.
The subtitles value which is also known as the subtitles state is intended for timed tracks that offer transcription or translation of the dialogue in the soundtrack of the video or audio file, so in other words the subtitles value is basically meant for users who have the sound available to them but the sound can't be understood, for example, users who do not understand the language of the video files or audio files soundtrack. Timed tracks that are marked as subtitles are usually displayed over the video for example.
The captions value which is also known as the captions state is intended for timed tracks that offer transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant aural also known as audio information in the video or audio file, so in other words the captions value is basically meant for users who do not have any access at all to the soundtrack, for instance, users who are deaf or for when the soundtrack is muted. Timed tracks that are marked as captions are usually displayed over the video, which is labeled as appropriate for the hard-of-hearing.
The descriptions value which is also known as the descriptions state is intended for timed tracks that offer textual descriptions of the visual component of a video, so in other words the descriptions value is basically meant to be used with audio synthesis when the visual component is unavailable, for example, for users who are blind, or for users who are currently unable to view the screen on which the video is displayed, for instance, when a user is interacting with an application without a screen while driving a vehicle. Timed tracks that are marked as descriptions are usually synthesized as a separate audio track.
The chapters value which is also known as the chapters state is intended for timed tracks that offer chapter titles, so basically the chapters value is meant to be used for navigating the video file or audio file. Timed tracks that are marked as chapters are usually displayed as an interactive list in the user agents interface.
And the metadata value which is also known as the metadata state is intended for timed tracks that offer metadata content, so in other words the metadata value is meant to be used by a script like JavaScript for example. Timed tracks that are marked as metadata are usually not displayed by the user agent.
When the kind attribute is not stated in the <track> element, the <track> element will act as is if the kind attributes subtitles value is stated.
Its usually a good idea if your timed track files begin with the same name as your video files or audio files, this is because many audio and video players will automatically look for subtitle files which share the same name as the video file or audio file and will automatically load them. For example, lets say we have a video file named "movie.avi" and we want to offer subtitles in English and Japanese in-order to do this we will need to name our timed track files "movie_en.srt" for English subtitles and "movie_ja.srt" for Japanese subtitles.
Also it's important to remember that there must not be two or more <track> element's that are children of the same <video> or <audio> element and that have the same values for the kind attributes, or have the same missing values or the same values representing the same language for the srclang attributes, or have the same missing values or the same values for the label attributes. So, in other words there can not be two or more <track> element's that have the same values for the kind, srclang and label attributes placed in the same <video> or <audio> element.
Now let me show you how to code in the kind attribute along with its subtitles value for the <track> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)"> <track kind="subtitles" src="subtitles.srt"> <p>This browser doesn't support the video element.</p> </video> </body> </html>And here is how to code in the kind attribute along with its subtitles value for the <track> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)" /> <track kind="subtitles" src="subtitles.srt" /> <p>This browser doesn't support the video element.</p> </video> </body> </html>- src
The src attribute specifies the location of the text timed track data file.
It's important to remember that the src attribute is also a required attribute which basically means that the <track> element must have an src attribute placed in it.
The src attributes value can be any absolute or relative URL value. An absolute URL value is basically all the information that a server requires to find the file, for instance src="http://www.example.com/subtitles.srt" is considered an absolute URL value. And a relative URL value is essentially a URL that points to a link on a server in a local manner, while basically leaving out the domain name from the URL, for example src="/subtitles.srt" is considered a relative URL value. Both types of URL's can optionally have leading and/or trailing space characters, which essentially means that your src attributes URL value can have white space before and or after the URL value, for example src=" http://www.example.com/subtitles.srt ".
Now let me show you how to code in the src attribute for the <track> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)"> <track src="captions.srt"> <p>This browser doesn't support the video element.</p> </video> </body> </html>And here is how to code in the src attribute for the <track> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)" /> <track src="captions.srt" /> <p>This browser doesn't support the video element.</p> </video> </body> </html>- srclang
The srclang attribute specifies the language of the text timed track file.
The srclang attributes value must be a valid IETF's BCP 47 language tag also known as a language code. If you want to know what the letters IEFT stand for, they actually stand for "Internet Engineering Task Force" and the letters BCP stand for "Best Current Practice", and is a persistent name for a series of RFCs whose numbers change as they are updated. Just in case you are wondering what the letters RFC stand for, they actually stand for "Request for Comments".
A language tag can be made up of one or more subtags made up of alphanumeric characters which consists of the numbers 0 to 9 and the letters a to z or A to Z, with each subtag separated by a hyphen "-", for example, the language tag fr-CA where the language subtag fr stands for French and the region subtag CA stands for Canada which makes up our language tag. So, in other words the language tag fr-CA stands for French as used in Canada. The subtags can be of a variety of types.
Its important to remember that all language tags must begin with a language subtag for example, en for English or ja for Japanese.
Now most language tags consist of a two-letter language subtag or a three-letter language subtag, for example, sdl for Saudi Arabian Sign Language or en for English. Most of the time this is followed by a two-letter or three-digit region subtag, for example, ES which is for Spain and 419 which is for Latin America and the Caribbean. The RFC 5646 also allows additional subtags, when needed which include the extended language subtags, script subtags, variant subtags, extension subtags and private-use subtags. All subtags have a maximum length of eight characters. And it's important to remember that whitespace is not allowed in a language tag.
You should also know that the language tags and their subtags, including the private-use subtags and the extension subtags, are case insensitive, which basically means for example, that the language tag fr-CA means the same thing if written FR-ca. You should know that the language subtags are usually in lowercase, while script subtags usually begin with an uppercase letter, and continue with lowercase, and region subtags are usually in uppercase. This is not set in stone, however, and you are free to use whatever letter-casing you like, be it in lowercase or uppercase lettering.
There may be times where the letter-casing of the language tags and their subtags is important, such as file names on some systems, when this occurs you should follow the rules of those systems other wise it is recommended that you follow the BCP 47 language tag standards.
Now there is still a lot more to the language tags that I have not yet covered in this tutorial, but what I have covered is sufficient enough for this tutorial, if you would like to learn more about the language tags you can read the "Tags for Identifying Languages" document for further and better understanding of language tags.
Also it's important to remember that there must not be two or more <track> element's that are children of the same <video> or <audio> element and that have the same values for the kind attributes, or have the same missing values or the same values representing the same language for the srclang attributes, or have the same missing values or the same values for the label attributes. So, in other words there can not be two or more <track> element's that have the same values for the kind, srclang and label attributes placed in the same <video> or <audio> element.
I will list some of the language tags that you can use for the srclang attributes value below. If you want to view all the subtags that are available to you that you can use, you can find them all at the "IANA Language Subtag Registry" document, there is nearly 8,000 entries to look at.
Code Language Subtags af Afrikaans language ar Arabic language bn Bengali language bo Tibetan language cs Czech language de German language el Modern Greek (1453-) language en English language es Spanish and Castilian language fa Persian language fr French language ga Irish language gd Scottish Gaelic language he Hebrew language hi Hindi language hy Armenian language id Indonesian language it Italian language ja Japanese language ko Korean language la Latin language pt Portuguese language ro Romanian, Moldavian and Moldovan language ru Russian language sm Samoan language uk Ukrainian language zh Chinese language aaa Ghotuo language acf Saint Lucian Creole French language aen Armenian Sign Language language ain Ainu (Japan) language bfi British Sign Language language cmn Mandarin Chinese language haw Hawaiian language sux Sumerian language ttt Muslim Tat language zh-Hans Simplified Chinese language+script zh-Hant Traditional Chinese language+script es-005 South American Spanish language+region en-GB British English language+region Now let me show you how to code in the srclang attribute for the <track> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)"> <track src="captions.srt" srclang="en"> <p>This browser doesn't support the video element.</p> </video> </body> </html>And here is how to code in the srclang attribute for the <track> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)" /> <track src="captions.srt" srclang="en" /> <p>This browser doesn't support the video element.</p> </video> </body> </html>- label
The label attribute specifies a user-readable title for the timed track file, or in other words the label attribute specifies a short label that represents the timed track file in a menu.
Now the label attributes value must be a string, which basically means that the value can contain text, numbers and character references like the Unicode character biohazard sign ☣ for example. But the label attributes value can not and must not contain any less-than sign "<" characters.
The label attributes value is used by user agents, like for example a browser, when listing subtitle timed text track files, caption timed text track files, and audio description timed text track files in the user agents user interface.
If you add the label attribute to the <track> element, the value of the label attribute, can not be an empty value, or else the code will not validate.
Also it's important to remember that there must not be two or more <track> element's that are children of the same <video> or <audio> element and that have the same values for the kind attributes, or have the same missing values or the same values representing the same language for the srclang attributes, or have the same missing values or the same values for the label attributes. So, in other words there can not be two or more <track> element's that have the same values for the kind, srclang and label attributes placed in the same <video> or <audio> element.
If you don't include the label attribute, the <track> element's track label will be given by the user agent, for example, the value of "untitled" in the users locale, or a value automatically generated from the other attributes.
Now let me show you how to code in the label attribute for the <track> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)"> <track src="captions.srt" label="English For The Hard of Hearing"> <p>This browser doesn't support the video element.</p> </video> </body> </html>And here is how to code in the label attribute for the <track> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)" /> <track src="captions.srt" label="English For The Hard of Hearing" /> <p>This browser doesn't support the video element.</p> </video> </body> </html>- default
The default attribute will instruct the user agent, for example a browser, that the text timed track is to be enabled if the users preferences do not indicate that another text timed track would be more appropriate.
The default attribute is a boolean attribute, which means that the default attribute needs no value for HTML5 web pages, all you have to do is include the word default in the desired <track> element and you're done. But in XHTML5 you need to include a value for all the attributes even for the boolean attributes, for example the default attribute will need to have a value of default, for instance default="default" in-order for the attribute to validate in XHTML5.
It's important to remember that the default attribute must only be placed in one <track> element within the same <audio> or <video> element. So, in other words if there is multiple <track> elements within the same <audio> or <video> element only one <track> element within each <audio> or <video> element is allowed to have the default attribute placed in it.
Now let me show you how to code in the default attribute for the <track> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)"> <track src="captions.srt" default> <p>This browser doesn't support the video element.</p> </video> </body> </html>And here is how to code in the default attribute for the <track> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)" /> <track src="captions.srt" default="default" /> <p>This browser doesn't support the video element.</p> </video> </body> </html>
