Как использовать и создавать субтитры к видео HTML5

HTML5 позволяет нам указывать субтитры для видео с помощью элементов. Различные свойства этого элемента позволяют нам указывать такие вещи, как тип добавляемого контента, язык, на котором он находится, и, конечно же, ссылку на текстовый файл, содержащий фактическую информацию о субтитрах.

 <video id=элементы управления видео> <source src=./step.mp4 type=video/mp4> <track label=中文字幕kind=субтитры, метаданные глав srclang=zh src=./caption.vtt default> <track label=ABC kind=subtitles srclang=de src=./caption1.vtt> <метка дорожки=номер kind=subtitles srclang=es src=./caption2.vtt> </video>

• kind присваивается значение subtitles, указывающее тип содержимого, содержащегося в файле.
• Метке присваивается значение, указывающее язык, на котором написан этот набор субтитров (например, английский или немецкий), и эти метки будут отображаться в пользовательском интерфейсе, чтобы позволить пользователю легко выбрать язык, на котором он хочет видеть субтитры.
• src в каждом случае назначается действительный URL-адрес, указывающий на соответствующий файл субтитров WebVTT.
• srclang указывает язык, на котором находится содержимое каждого файла субтитров.
• Атрибут по умолчанию установлен для элемента English, чтобы указать браузеру, что это определение файла субтитров по умолчанию, которое будет использоваться, когда субтитры включены, и пользователь не сделал определенного выбора.

Файл, содержащий фактические данные субтитров, представляет собой простой текстовый файл, соответствующий указанному формату, в данном случае формату текстовой дорожки веб-видео (WebVTT). Спецификация плагина WebVTT все еще находится в стадии разработки, но основные ее части стабильны, поэтому мы можем использовать ее уже сегодня.

Поставщики видео, такие как Blender Foundation, предоставляют субтитры и субтитры в текстовом формате для своих видео, но обычно в формате SubRip Text (SRT). Их можно преобразовать в WebVTT с помощью онлайн-конвертера, например srt2vtt.

Расширение файла ==.vtt==

==.vtt==MIME-тип файла — text/vtt.

В браузерах Chrome и Firefox субтитры .vtt могут загружаться и отображаться без каких-либо препятствий. Однако для браузеров IE10+, хотя субтитры .vtt также поддерживаются, необходимо определить тип MIME, иначе формат WebVTT будет игнорироваться. Более простой способ — добавить файл .htaccess в папку, где расположены субтитры, и написать в нем AddType text/vtt .vtt.

//Вы должны объявить ==WEBVTT== в начале файла

ВЕБВТТ

//Время начала -->Время окончания, единица измерения — миллисекунды

00:00:00.001 --> 00:00:03.000

// Отображение субтитров, соответствующих указанному выше времени. Стиль можно задать отдельно, аналогичный имени класса.

<v aa>Девять Иньлин Пустоты 1111</v>

00:00:03.001 --> 00:00:06.000

<v bb>Боги и демоны 2222</v>

00:00:06.001 --> 00:00:09.000

С моим телом крови 3333

00:00:09.001 --> 00:00:12.000

Жертва 4444

00:00:12.001 --> 00:00:15.000

Три жизни и семь жизней 5555

Псевдоэлемент ::cue является ключом к выбору отдельных сигналов текстового трека для целей стилизации, поскольку он соответствует любому определенному сигналу. К текстовым подсказкам можно применить лишь несколько свойств CSS:

• цвет
• непрозрачность
• видимость
• текст-оформление
• текстовая тень
• Фоновая стенография производительности
• краткое описание производительности
• Атрибут сокращенного обозначения шрифта
• высота строки
• пробел

==Примечание: стили сигналов ::cue в настоящее время работают в Chrome, Opera и Safari, но еще не работают в Firefox. ==

WebVTT также поддерживает некоторые HTML-теги для управления стилем. Общие из них включают тег sound ==v==, тег цвета ==c==, тег жирного шрифта ==b==, тег курсива ==i== и подчеркивание ==u. ==, а также теги ==ruby== и ==lang== и т. д.

 //Установим стиль субтитров video::cue{background-color:transparent; color:white; line-height: 100px;}//Установим стиль однострочных субтитров video::cue( v[voice= aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}

ИЕ

По умолчанию субтитры в Internet Explorer 10+ включены, а элемент управления по умолчанию содержит кнопку и меню, которые предоставляют те же функции, что и меню, которое мы только что создали. Атрибут по умолчанию также поддерживается.

==Примечание: IE будет полностью игнорировать файлы WebVTT, если вы не определите тип MIME. Это можно легко сделать, добавив файл .htaccess в соответствующий каталог, содержащий AddType text/vtt .vtt==

Сафари

Safari 6.1+ имеет аналогичную поддержку Internet Explorer 10+, отображая меню с различными доступными опциями и добавляя автоматическую опцию, позволяющую браузеру сделать выбор.

Хром и Опера

Эти браузеры имеют схожую реализацию: субтитры включены по умолчанию, а набор элементов управления по умолчанию содержит кнопку «cc», которая включает и выключает субтитры. Chrome и Opera игнорируют атрибут элемента по умолчанию и вместо этого пытаются сопоставить язык браузера с языком субтитров.

Вышеупомянутый метод использования и создания субтитров для видео в формате HTML5, представленный редактором. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!