Атрибут srclang тега <track> — мова субтитрів доріжки

HTML

<p class="head">1. Розмітка: п'ять доріжок з різними srclang</p>
<video class="grav" width="320" height="180" controls
       poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%23223344'/%3E%3Cpolygon%20points='140,66%20140,114%20186,90'%20fill='%23dde4ee'/%3E%3Crect%20x='60'%20y='140'%20width='200'%20height='18'%20rx='4'%20fill='%23000000'%20opacity='.5'/%3E%3Crect%20x='72'%20y='146'%20width='176'%20height='6'%20rx='3'%20fill='%23dde4ee'/%3E%3C/svg%3E">
  <track kind="subtitles" srclang="uk" label="Українські" src="data:text/vtt,WEBVTT%0A" default>
  <track kind="subtitles" srclang="en-GB" label="English (UK)" src="data:text/vtt,WEBVTT%0A">
  <track kind="subtitles" srclang="UK-ua" label="Регістр збережено" src="data:text/vtt,WEBVTT%0A">
  <track kind="subtitles" srclang="хтозна" label="Ніхто не перевірив" src="data:text/vtt,WEBVTT%0A">
  <track kind="subtitles" label="Зовсім без srclang" src="data:text/vtt,WEBVTT%0A">
</video>
<p class="note">Між рядками вище стоїть правило, яке намагається обвести кожен
   track рамкою й вивести його srclang. На екрані немає нічого: теґ службовий.</p>

<p class="head">2. Що з цього дістається людині, а що машині</p>
<ul class="perelik">
  <li><b>Українські</b> <span class="kod">srclang="uk"</span> <i>у меню видно підпис, у мові доріжки — uk</i></li>
  <li><b>English (UK)</b> <span class="kod">srclang="en-GB"</span> <i>регіональний варіант — теж чинний тег</i></li>
  <li><b>Регістр збережено</b> <span class="kod">srclang="UK-ua"</span> <i>лишиться саме UK-ua, браузер його не зведе</i></li>
  <li class="bida"><b>Ніхто не перевірив</b> <span class="kod">srclang="хтозна"</span> <i>приймається без помилки й нічого не означає</i></li>
  <li class="bida"><b>Зовсім без srclang</b> <span class="kod">srclang відсутній</span> <i>мова доріжки порожня; валідатор лається, браузер мовчить</i></li>
</ul>

CSS

.head {
    margin: 20px 0 6px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.grav {
    display: block;
    border: 2px solid #b9c6d8;
}

/* обидва правила нижче не спрацюють: track невидимий назавжди */
track {
    display: block;
    padding: 4px 8px;
    border: 2px solid #d64545;
    background: #fff4f4;
}

track::after {
    content: "srclang=" attr(srclang) " · label=" attr(label);
    color: #c0392b;
}

.note {
    max-width: 520px;
    margin: 6px 0 0;
    color: #5a6472;
    font-size: .9em;
}

.perelik {
    max-width: 620px;
    margin: 0;
    padding: 10px 10px 10px 26px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    line-height: 1.8;
}

.perelik .kod {
    padding: 1px 5px;
    border-radius: 3px;
    background: #eef3fb;
    color: #1b4f9c;
    font: .85em/1.6 ui-monospace, monospace;
}

.perelik i {
    display: block;
    color: #5a6472;
    font-size: .9em;
}

.perelik .bida .kod {
    background: #fff4f4;
    color: #c0392b;
}

<video width="320" height="240" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
    <track src="data:text/vtt,WEBVTT%0A%0A00:00:00.000%20--%3E%2000:00:04.000%0AПерший%20рядок%20субтитрів" kind="subtitles" srclang="uk" label="Українська" default>
    <track src="data:text/vtt,WEBVTT%0A%0A00:00:00.000%20--%3E%2000:00:04.000%0AFirst%20subtitle%20line" kind="subtitles" srclang="en" label="English">
    Ваш браузер не відтворює відео.
</video>