Створити HTML-елемент track
Або вставте текст субтитрів
Параметри
Субтитри — для глядачів, які чують звук і потребують слів: переклад або та сама мова, записана текстом. Субтитри для людей з порушеннями слуху — для тих, хто не чує, тож вони несуть і те, що звук каже всім іншим: музику, двері, телефонний дзвінок. Один файл може служити обом цілям, тож сторінка питає, а не вгадує, і значення не можна змінити пізніше зсередини елемента. «Описи», «розділи» й «метадані» не пропонуються: жодне з них не можна заповнити вмістом файлу субтитрів.
Коротка мовна позначка на кшталт en, en-GB або pt-BR, що називає мову слів у субтитрах, а не мову відео. Доріжка, що називає себе субтитрами, зобов’язана назвати мову, тож очищення поля повертає en, а не відкидає атрибут — і оскільки кожен атрибут друкується в результаті, ви бачите запасний варіант ще до того, як щось вставите.
Вільний текст: English, English (SDH), Français. Це рядок, який вибирає глядач, коли сторінка пропонує більше однієї доріжки, тож пишіть його так, як ваша аудиторія впізнає. Очищення поля прибирає атрибут зовсім, а не пише порожній, що повертає називання плеєру; порожня назва поставила б у це меню безіменний рядок.
Увімкнено — субтитри з’являються щойно починається відео. Медіаелемент може мати лише одну доріжку за замовчуванням, тож лишайте вимкненим, якщо сторінка вже несе одну: друга доріжка, що називає себе типовою, змушує плеєри вибрати не ту, а те, що вона не типова, лише означає, що глядач увімкне її сам.
У якій частоті кадрів пораховано таймінги. На сторінках форматів це те, що потрібно MicroDVD, бо він зберігає час як номери кадрів. На сторінках частоти кадрів це частота, за якою файл синхронізували — версія, для якої робили субтитри, — а друге поле сторінки приймає частоту відео, з яким ви будете їх використовувати. 23,976, 24, 25, 29,97, 30, 50, 59,94 і 60 — найпоширеніші. Помилка зміщує весь таймлайн, а на сторінках частоти кадрів — на відношення, а не на фіксовану величину.
Елемент <track> підключає субтитри до відео на сторінці: він називає файл, мову й те, як трек зветься в меню плеєра. Ця сторінка збирає такий елемент в один рядок і вкладає сам WebVTT усередину атрибута src як data URI, тому окремий файл поруч зі сторінкою не потрібен.
Вибір kind вирішує, для кого трек: subtitles — для глядачів, які чують звук, captions — для тих, хто не чує, і тоді у файлі лишаються позначки звуків і музики. Мова потрапляє в srclang; порожнє поле не дає порожнього атрибута, а підставляє en, бо трек, який називає себе субтитрами, мусить назвати мову. Порожній підпис прибирає label зовсім: це необов’язковий атрибут, і без нього плеєр вирішує сам. Перемикач default додає атрибут, який відкриває трек автоматично.
Вихід довший за вхід, і це нормально: %0A — перенос рядка, %20 — пробіл, %25 — знак відсотка. Розмітка WebVTT зберігається: коментарі, блоки STYLE, назви реплік і налаштування align:start position:10% переходять у data URI без змін. Символи в підписі екрануються, щоб лапки не закрили атрибут дочасно. Нічого не завантажується: файл читається в браузері, а ви копіюєте готовий рядок.
Приклади
Файл SRT із типовими полями
Вхід
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Результат
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Один рядок на виході, і весь файл усередині нього: %0A — це перенос, %20 — пробіл, тому WebVTT їде в атрибуті src, а не лежить файлом поруч зі сторінкою. Чотири атрибути — це чотири поля: мова тексту, рядок, який глядач вибирає в меню плеєра, і default, який відкриває трек сам. Номери реплік із SRT збережені як ідентифікатори.
WebVTT входить як той самий WebVTT
Вхід
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Результат
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Усе, що WebVTT тримає поза репліками, виживає: примітка на рядку WEBVTT, блок NOTE, блок STYLE, який визначає вигляд субтитрів у плеєрі, назва репліки й налаштування align:start position:10% (знак %25 там — це знак відсотка, закодований, бо голий знак відсотка в URI не дозволений). Файл, який прийшов як WebVTT, виходить тим самим WebVTT. Два поля кажуть en-GB і English (UK), бо цей примірник зроблено для британської аудиторії; у файлі про це не було ні слова.
Субтитри для глядачів, які не чують
Вхід
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Результат
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
Файл повен звукових ефектів і музики — саме для цього й існує значення captions у полі kind. Окремо підпис у меню ввели як Tom & “the boss” і отримали Tom & "the boss": неекрановані лапки закрили б атрибут одразу й перетворили решту назви на сміттєві атрибути елемента.
Три поля очищені або вимкнені
Вхід
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Результат
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Три поля змінено, три різні результати, бо розмітка вимагає різного. Підпис у меню зник з елемента зовсім — він необов’язковий, і без нього рішення ухвалює плеєр. Поле мови порожнє, але все одно дає srclang зі значенням en: трек, який називає себе субтитрами, мусить назвати мову, тому порожньої мови не буває, і запасне значення видно у відповіді. Перемикач default вимкнено, і атрибут теж зник, тож трек не відкриється сам — безпечний напрям, коли на сторінці більше одного треку.
Часті запитання
Чи потрібен мені окремий файл .vtt поруч зі сторінкою?
Ні. Увесь WebVTT лежить усередині атрибута src як data URI, тому сторінка не робить жодного запиту по файл субтитрів. Ви копіюєте один рядок у розмітку, і трек працює. Окремий файл потрібен лише тоді, коли ви хочете редагувати субтитри, не чіпаючи сторінку.
Чи працюватиме це, якщо відкрити сторінку з власного комп’ютера?
Так, саме тому WebVTT вбудований у data URI: браузер не звертається по зовнішній файл, отже не діє обмеження локального походження на читання сусіднього файлу. Сторінка все одно мусить бути справжньою сторінкою з відео та елементом track; одного рядка без них недостатньо.
Чому результат довший за мій файл субтитрів?
Бо кожен перенос, пробіл і службовий символ закодовані у форматі URI: %0A замінює перенос, %20 — пробіл, %25 — знак відсотка. Це не дублювання тексту, а його безпечне подання в атрибуті. Після декодування плеєр бачить той самий WebVTT, який ви подали.
Чому після очищення поля підпису немає атрибута label?
Бо label необов’язковий. Порожній рядок означає «не задавати підпис», і сторінка прибирає атрибут зовсім, а не друкує порожній label. Тоді плеєр сам вирішує, як назвати трек у меню; якщо назва потрібна, поверніть її в поле.
Чим subtitles відрізняються від captions на цій сторінці?
subtitles призначені для глядачів, які чують звук і потребують перекладу або тексту; captions — для тих, хто не чує, тому містять ще й позначки звуків, музики та іншої невербальної інформації. Файл сам не каже, для кого він; це вибір у полі kind, і саме він потрапляє в атрибут.
Які ще види треків ви не додали?
Лише subtitles і captions. descriptions описують зображення для незрячих, chapters задають розділи, metadata дають довільні дані для скриптів; жоден із них не є субтитрами, і змішувати їх з цим генератором означало б створити трек, який плеєр покаже не так, як ви очікуєте.
Чи змінюється щось у моїх субтитрах дорогою?
Текст, таймкоди й порядок реплік зберігаються. Файл SRT перетворюється на WebVTT, бо саме цей формат приймає track; номери реплік SRT стають ідентифікаторами. Файл, який уже був WebVTT, виходить тим самим WebVTT разом із коментарями, блоками STYLE і налаштуваннями окремих реплік.