Атрибут default тега <track> — типові субтитри

HTML

<form>
    <p class="field">
        <label for="nick">Текстове поле з value — це і є «за замовчуванням»</label>
        <input id="nick" value="Гість">
    </p>

    <fieldset>
        <legend>Перемикач із checked — оберіть другий варіант</legend>
        <p><label><input type="radio" name="dostavka" checked> <span>Самовивіз</span></label></p>
        <p><label><input type="radio" name="dostavka"> <span>Кур'єром</span></label></p>
        <p class="note">Жовта позначка лишається на першому: це :default, стан із
            розмітки. Зелена рамка ходить за вашим вибором: це :checked.</p>
    </fieldset>

    <p class="field">
        <label for="misto">Список із selected</label>
        <select id="misto">
            <option>Київ</option>
            <option selected>Львів</option>
            <option>Одеса</option>
        </select>
    </p>

    <p class="field">
        <button>Перша кнопка форми</button>
        <button>Друга кнопка</button>
        <span class="note">Перша позначена жовтим: саме вона спрацює, якщо
            натиснути Enter у полі — це теж :default.</span>
    </p>
</form>

CSS

.field {
    margin: 14px 0;
}

label {
    font-weight: 600;
}

fieldset {
    max-width: 460px;
    margin: 14px 0;
    padding: 8px 12px;
    border: 2px solid #b9c6d8;
}

legend {
    padding: 0 6px;
    font-weight: 600;
}

fieldset p {
    margin: 6px 0;
}

input,
select,
button {
    padding: 4px 8px;
    font: inherit;
}

:default {
    outline: 3px solid #f2b134;
    outline-offset: 2px;
}

input:checked + span {
    padding: 1px 6px;
    border-radius: 4px;
    background: #e7f6ea;
    box-shadow: 0 0 0 2px #3a9a4f;
}

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

<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%3A00%3A00.000%20--%3E%2000%3A00%3A05.000%0A%D0%9F%D1%80%D0%B8%D0%B2%D1%96%D1%82%21%20%D0%A6%D0%B5%20%D1%83%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D1%81%D1%8C%D0%BA%D0%B0%20%D0%B4%D0%BE%D1%80%D1%96%D0%B6%D0%BA%D0%B0%20%D1%81%D1%83%D0%B1%D1%82%D0%B8%D1%82%D1%80%D1%96%D0%B2." kind="subtitles" srclang="uk" label="Українська" default>
    <track src="data:text/vtt,WEBVTT%0A%0A00%3A00%3A00.000%20--%3E%2000%3A00%3A05.000%0AHello%21%20This%20is%20the%20English%20subtitle%20track." kind="subtitles" srclang="en" label="English">
    Ваш браузер не відтворює відео.
</video>