Атрибут kind тега <track> — призначення текстової доріжки

HTML

<p class="head">1. Розмітка: сім доріжок із різними kind</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="captions" srclang="uk" label="Українські (для глухих)" src="data:text/vtt,WEBVTT%0A">
  <track kind="descriptions" srclang="uk" label="Опис зображення" src="data:text/vtt,WEBVTT%0A">
  <track kind="chapters" srclang="uk" label="Розділи" src="data:text/vtt,WEBVTT%0A">
  <track kind="metadata" srclang="uk" label="Дані для скрипта" src="data:text/vtt,WEBVTT%0A">
  <track kind="" srclang="uk" label="Порожнє значення" src="data:text/vtt,WEBVTT%0A">
  <track kind="subtitels" srclang="uk" label="Одруківка в kind" src="data:text/vtt,WEBVTT%0A">
</video>
<p class="note">У стилях є правило, яке намагається обвести кожен track і вивести
   його kind. На екрані немає нічого: побачити цей теґ не можна.</p>

<p class="head">2. Чим кожна доріжка стане насправді</p>
<ul class="karta">
  <li class="ok"><b>kind="subtitles"</b> <i>меню субтитрів · переклад мовлення</i></li>
  <li class="ok"><b>kind="captions"</b> <i>меню субтитрів · мовлення плюс звуки</i></li>
  <li class="ok"><b>kind="descriptions"</b> <i>озвучування опису · підтримка слабка</i></li>
  <li class="ok"><b>kind="chapters"</b> <i>розділи на смузі перемотування</i></li>
  <li class="ok"><b>kind="metadata"</b> <i>лише для скриптів, людині не показують</i></li>
  <li class="bida"><b>kind=""</b> <i>стає metadata — з меню зникає</i></li>
  <li class="bida"><b>kind="subtitels"</b> <i>одруківка теж стає metadata — з меню зникає</i></li>
  <li class="ok"><b>атрибута немає</b> <i>стає subtitles — це типове значення</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;
}

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

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

.karta {
    max-width: 620px;
    margin: 0;
    padding: 10px 10px 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    list-style: none;
}

.karta li {
    margin: 3px 0;
    padding: 4px 8px;
    border-left: 4px solid #3a9a4f;
    border-radius: 3px;
    background: #f3fbf4;
}

.karta b {
    font: 600 .9em/1.6 ui-monospace, monospace;
}

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

.karta .bida {
    border-left-color: #d64545;
    background: #fff4f4;
}

.karta .bida b {
    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:30.000%0AВступ" kind="chapters" srclang="uk" label="Розділи">
    Ваш браузер не відтворює відео.
</video>