Добавление синхронизированного текста транскрипции к видео на HTML5

в 14:24, , рубрики: accessibility, html, html5, Веб-разработка, видео, стенограмма, субтитры, транскрипция, метки: , , , , ,

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

Транскрипция задаётся документом в формате VTT, который добавляется к исходному видео в теге <track>.

<video class="span12 readable" poster="avas.jpg" controls tabindex="0" title="Авас">
	<source src="avas.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="avas.ogg" type='application/ogg' />
	<source src="avas.webm" type='video/webm' />
	<track src="avas-transcript.vtt" label="Русские субтитры" kind="subtitles" srclang="ru" default />
</video>

VTT-файл является специально форматированным документом. Он содержит нумерованную очередь, время начала/конца, а также сам текст. Рекомендуется в текст транскрипции включать не просто запись речи, но и имя произносящего. Сам текст в VTT может быть форматирован несколькими базовыми тегами, такими как <i> или <b>.
Начинается документ с объявления WEBVTT:

WEBVTT

1
00:00:02.000 --> 00:00:07.000
<i>Доцент Николай Петяев:</i> Как ваша фамилия?

2
00:00:09.000 --> 00:00:11.000
<i>Студент Авас Горидзе:</i> Горидзе.

3
00:00:13.000 --> 00:00:18.000
<i>Петяев:</i> А зовут вас как?

4
00:00:20.000 --> 00:00:21.000
<i>Горидзе:</i> Авас.

5
00:00:22.000 --> 00:00:27.000
<i>Петяев:</i> Меня Николай Степанович, а вас?

6
00:00:29.000 --> 00:00:30.000
<i>Горидзе:</i> Авас!

7
00:00:31.000 --> 00:00:34.000
<i>Петяев:</i> Меня Николай Степанович, а вас?!

8
00:00:37.000 --> 00:00:38.000
<i>Горидзе:</i> Авас!!!

Кроме файла VTT, можно также использовать TTML (Time Text Markup Language), который является обычным XML, к тому же поддерживающимся Flash и некоторыми другими распространёнными технологиями. Так что при миграции с Flash на HTML5 это может оказаться оптимальным вариантом, потому что можно будет использовать уже имеющийся документ с транскрипцией.

<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="ru">
	<body>
		<div>
			<p begin="00:00:2.00" end="00:00:7.00">
				Доцент Николай Петяев: Как ваша фамилия?
			</p>

			<p begin="00:00:9:00" end="00:00:11:00">
				Студент Авас Горидзе: Горидзе.
			</p>

			<!-- И так далее. -->

		</div>
	</body>
</tt>

Таким образом, необходимо расшифровать звук видео, подготовить размеченный файл транскрипции и добавить его в тег <video>.

Транскрибирование видео может быть отдано на аутсорсинг, особенно если речь идёт об обработке большого объёма материалов, например, это может быть актуально для правительственных сайтов, к которым предъявляются требования по обеспечению доступности всего контента для пользователей с любыми ограничениями, в том числе и голосовых записей для глухих посетителей ресурса.

Автор: Tseikovets

Источник


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js