Использование и производство видео субтитров в формате HTML5

внешний интерфейс HTML

Во-первых, давайте взглянем на отображение поддержки субтитров в нативном HTML5-видео:

字幕截图

элемент

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

<video id="video"  controls>
    <source src="./step.mp4" type="video/mp4">
    <track label="中文字幕" kind="subtitles" chapters metadata srclang="zh" src="./caption.vtt" default>
    <track label="ABC" kind="subtitles" srclang="de" src="./caption1.vtt">
    <track label="Number" kind="subtitles" srclang="es" src="./caption2.vtt">
 </video>

Атрибут введения трека:

  • kind присваивается значение субтитров, указывающее тип контента, который содержит файл

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

  • src в каждом случае назначается действительный URL-адрес соответствующего файла субтитров WebVTT.

  • srclang указывает язык, на котором находится содержимое каждого файла субтитров.

  • Атрибут по умолчанию устанавливается для элемента English, чтобы указать браузеру, что это определение файла субтитров по умолчанию, используемое, когда субтитры включены, а пользователь не сделал определенного выбора.

Файл субтитров WebVTT

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

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

Спецификация формата файла:

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

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

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

//文件开头下必须先声明 **WEBVTT**
WEBVTT
// 起始时间  -->  结束时间，单位为毫秒
00:00:00.001 --> 00:00:03.000
// 对应上面的时间显示字幕，可以单独设置样式，aa类似class类名
<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

Эта спецификация файла очень проста, вы можете написать ее сами, а можете использоватьУчитель Чжан СиньсюйразвитиеWebVTT.VTT файловый генераторгенерировать

настройки стиля субтитров css

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

  • color
  • opacity
  • visibility
  • text-decoration
  • text-shadow
  • background
  • outline
  • font
  • line-height
  • white-space

Примечание. Стиль cue ::cue в настоящее время работает в Chrome, Opera и Safari, но пока не работает в Firefox.

WebVTT также поддерживает некоторые HTML-теги для управления стилем.vэтикетка, цветcэтикетка, полужирныйbэтикетка, наклонiметка, подчеркиваниеuтеги иrubyа такжеlangэтикетки и т.д.

//设置字幕的样式
video::cue{
    background-color:transparent;
    color:white;
    font-size:20px;
    line-height: 100px;
}

// 设置单行字幕的样式 
video::cue(v[voice=aa]){
    color:green;
}

video::cue(v[voice=bb]){
    color:rgb(0, 26, 128);
}

Совместимость с браузером

  • IE

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

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

  • сафари

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

  • Хром и Опера

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

Кейс-шоу: демо

использованная литература

Если вы считаете, что это неплохо, пожалуйста, дайте мне лайк, чтобы поощрить это!

Категории