Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

What is the purpose of the attribute srclang of the element track?

As the title says, my question is what is the purpose of the attribute srclang of the element track? I don’t see any visual difference in the caption options when I include it. Also, I checked if this attribute has something to do with accessibility but the screen reader is announcing the caption options the same way like if we didn’t have this attribute. Here’s what MDN says about it:

Language of the track text data. It must be a valid BCP 47 language
tag. If the kind attribute is set to subtitles, then srclang must be
defined.

But doesn’t give any hints on what it actually does.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I checked the HTML specs as well and didn’t find its use case being mentioned there.

Here’s the example if it even matters:

<video
  poster="./images/image-width=1120.webp"
  width="500"
  height="500"
  controls
>
  <source type="video/mp4" src="./Dark_Haired_Girl_in_disbelief_1.mp4" />
  <track
    label="English"
    kind="subtitles"
    srclang="en"
    lang="en-US"
    src="./track-en.vtt"
  />
  <track
    label="French"
    kind="subtitles"
    srclang="fr"
    lang="fr-FR"
    src="./track-fr.vtt"
  />
  <p>Your browser doesn't support videos.</p>
</video>

What’s the purpose of this attribute? Maybe it has something to do with SEO? Or it’s just useless?

>Solution :

It is so the browser can autoselect the right subtitle track depending on the user’s preferences. The lang attribute specifies the language of the label, so you can have e.g. lang="nl" srclang="en" to indicate a Dutch label for English subtitles.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading