Создать элемент 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. Ошибка сдвигает весь таймлайн, а на страницах частоты кадров — на коэффициент, а не на фиксированную величину.
Страница помещает ваши субтитры внутрь одного HTML-элемента, который можно вставить в страницу. На выходе — одна строка `<track>`, в которой WebVTT встроен прямо в атрибут `src`, поэтому текст субтитров путешествует вместе с разметкой: не нужно загружать второй файл, не нужно угадывать путь, и плеер не может пойти искать то, чего нет. Эта встроенность и есть смысл страницы, и причина в том, как браузеры обходятся с локальными файлами: дорожку браузер не рисует, а загружает, и отказывается загружать, если страница открыта с диска, поэтому `<track src="film.vtt">` на странице, сохранённой на рабочий стол, не покажет ничего — ни ошибки на экране, ни строки в меню субтитров, только одна строчка в консоли, которую большинство людей не открывает.
Атрибуты берутся из полей панели, потому что ни один из них нельзя прочитать из вашего файла: `kind` важнее всех — `subtitles` это перевод для зрителей, которые не могут следить за звуком, а `captions` более полная версия, которая несёт ещё музыку и звуковые эффекты для тех, кто не слышит, — и файл, полный пометок вроде `[хлопает дверь]` и нот, может быть и тем и другим, так что страница спрашивает, а не гадает.
Остальные три поля — язык текста, имя в меню субтитров плеера и то, должна ли дорожка открываться сама, — и два из них ведут себя по-разному при очистке: пустое имя убирает атрибут целиком, потому что подпись необязательна, а пустое поле языка не убирает, а подставляет `en`, потому что дорожка, объявившая себя субтитрами, обязана назвать язык.
Примеры
Файл 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>
Файл полон звуковых эффектов и музыки — ровно для этого и существует `kind="captions"`, субтитры для зрителей, которые не слышат, и поле остаётся единственным местом, где это можно сказать. Отдельно: имя в меню набрали как `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">
Три поля изменены, три разных результата, потому что HTML требует разного. Имя в меню исчезло из элемента целиком: оно необязательно, и его отсутствие передаёт решение плееру. Поле языка пусто, а элемент всё равно содержит `srclang="en"`: дорожка, объявившая себя субтитрами, обязана назвать язык, поэтому пустой язык невозможен, и подстановка видна в выводе. Переключатель default выключен, и этого атрибута тоже нет, так что дорожка не откроется сама — безопасное направление, когда на странице больше одной дорожки.
Частые вопросы
Нужен ли рядом со страницей файл .vtt?
Нет, и в этом смысл страницы. WebVTT записывается в атрибут src как data: URI, поэтому элемент несёт свои субтитры сам. Его можно вставить в страницу, отправить файл письмом или перенести в другую папку, и субтитры всё равно появятся. Следить нужно за одним: всё это — один атрибут, и если скопировать только часть длинной строки, URI окажется сломан и дорожка будет пустой.
Будет ли это работать, если просто открыть HTML-файл со своего компьютера?
Да, и ради этого случая страница и встраивает субтитры. Когда страница открыта с диска, браузер отказывается загружать отдельный файл дорожки, поэтому дорожка, указывающая на film.vtt, не покажет ничего: ни видимой ошибки, ни строки в меню, только пустое меню субтитров. data: URI не загружается вовсе, текст уже стоит в атрибуте, и работает одинаково на рабочем столе и на сервере.
Почему результат намного длиннее моего файла субтитров?
Потому что каждый символ, который не буква и не цифра, становится тремя знаками в URI: пробел — это %20, перенос строки — %0A. Файл в сто килобайт превращается в несколько сотен. Base64 был бы короче, примерно на треть больше исходника вместо двукратного, но результат был бы стеной нечитаемых символов; в нынешнем виде атрибут src можно открыть и узнать в нём собственный диалог, и для файла, который вы собираетесь вставить в страницу и поддерживать руками, это стоит лишнего размера.
Почему после очистки поля подписи атрибута label нет?
Потому что подпись меню в HTML необязательна, и её отсутствие означает не «без имени», а «плеер сам решит, что показать в меню субтитров», — обычно это язык. Поэтому очистка поля убирает атрибут, а не пишет пустой: `label=""` показал бы в меню пустую строку. Имя можно вернуть в любой момент, это обычная строка, и больше ничего на странице от неё не зависит.
Чем subtitles отличаются от captions здесь?
Тем, для кого они. `subtitles` предполагают, что зритель слышит звук и ему нужно перевести или продублировать слова; `captions` предполагают, что зритель звук не слышит, поэтому несут ещё и информацию, которая до слышащей аудитории доходит через звук: музыку, двери, телефонный звонок. Один и тот же текст годится и для того и для другого, поэтому страница не может определить, что вы имеете в виду. Изменить выбор позже, внутри элемента, тоже нельзя, так что выбирайте под свою аудиторию.
Какие ещё виды дорожки вы не предложили?
Три: `descriptions`, которые описывают картинку для зрителей, которые не видят; `chapters`, которые являются навигацией, а не субтитрами, и у которых на этом сайте есть собственная страница; и `metadata`, которые никому не показываются. Ни один из трёх нельзя заполнить содержимым файла субтитров, поэтому предлагать их значило бы дать собрать элемент, который ничего не показывает. Предложены те два, которым файл субтитров действительно может служить.
Меняется ли что-нибудь в моих субтитрах по дороге?
Текст, времена и оформление остаются прежними, а файл WebVTT сохраняет свои блоки комментариев, стилей и регионов вместе с настройками отдельных реплик. Меняется форма: строки переписываются в синтаксис WebVTT, который читают плееры, поэтому запятая в 00:00:01,000 из файла SRT становится точкой. Один байт отбрасывается намеренно — ведущий маркер, сообщающий, что файл в UTF-8: data: URI сам объявляет кодировку, иначе маркер выглядел бы тремя лишними знаками в начале.