Атрибут src тега <track> — адреса файлу субтитрів WebVTT

<video width="320" height="240" controls preload="metadata" 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:03.000%0AТекст субтитрів" kind="subtitles" srclang="uk" label="Українська" default>
    Ваш браузер не відтворює відео.
</video>

HTML

<div class="pair">
    <div class="col">
        <p class="cap">Файл subtitles.vtt, на який показує <b>src</b>:</p>
        <pre class="vtt">WEBVTT

00:00:00.000 --&gt; 00:00:03.000
Перша репліка субтитрів

00:00:03.000 --&gt; 00:00:06.000
Друга репліка — та сама доріжка</pre>
        <p class="warn">Без першого рядка WEBVTT доріжка мовчки переходить
            у стан помилки: на сторінці не буде ні субтитрів, ні попередження.</p>
    </div>

    <div class="col">
        <p class="cap">Як це виглядає в програвачі (кадр умовний):</p>
        <div class="player">
            <span class="badge">субтитри увімкнено атрибутом default</span>
            <div class="cue cue-1">Перша репліка субтитрів</div>
            <div class="cue cue-2">Друга репліка — та сама доріжка</div>
        </div>
        <p class="cap small">Позицію напису задає сам файл, а не CSS: із
            псевдоелемента ::cue доступні лише колір, тло, шрифт і накреслення.</p>
    </div>
</div>

CSS

.pair {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.col {
    flex: 1 1 300px;
    min-width: 280px;
}

.cap {
    margin: 0 0 6px;
    font-size: .9em;
}

.small {
    margin-top: 8px;
    color: #5a6472;
}

.vtt {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
    background: #f6f9ff;
    font: 13px/1.5 ui-monospace, monospace;
    overflow-x: auto;
}

.warn {
    margin: 10px 0 0;
    color: #a02a2a;
    font-size: .85em;
}

.player {
    position: relative;
    width: 320px;
    max-width: 100%;
    height: 180px;
    border-radius: 6px;
    background:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Ccircle%20cx='160'%20cy='74'%20r='34'%20fill='%232f6fd0'/%3E%3Cpath%20d='M150%2058L184%2074L150%2090Z'%20fill='%23ffffff'/%3E%3C/svg%3E")
        center / cover no-repeat, #1b2536;
}

.badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .85);
    color: #12203a;
    font-size: .75em;
}

.cue {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    max-width: 90%;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font: 15px/1.3 system-ui, sans-serif;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
}

.cue-1 {
    animation: cue1 6s linear infinite;
}

.cue-2 {
    animation: cue2 6s linear infinite;
}

@keyframes cue1 {
    0%, 49.99% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes cue2 {
    0%, 49.99% { opacity: 0; }
    50%, 100% { opacity: 1; }
}