Титры для видео HTML5

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

Следующие фрагмент HTML показывает, как работает элемент:



<video>
<sourcetype="video/mp4"src="video_file"></source>
<tracksrc="captions_file"label="English captions"kind="captions"srclang="en-us"default></track>
<tracksrc="descriptions_file"label="English description"kind="descriptions"srclang="en-us"></track>
</video>


Спецификации W3C HTML5 позволяет подключить несколько форматов субтитров. Internet Explorer 10 поддерживает элемент <track>, но не загружается и нет еще отображения заголовков файла. Эта реализация используется как прототип, для различных форматов заголовка.

В 2012 году на совещании W3C TPAC, было обсуждение о том что должно быть в HTML5. Недавно была создана группа сообщества Web Media Text Tracksс целью дальнейшей работы по субтитрам для видео HTML5.

Мы еще на стадии развития, но HTML5 уже стабилизируется. Для того, чтобы обеспечить лучшую обратную связь формата с элементом <track>  субтитры файлов, программисты Internet Explorer и команды партнеры создали прототип, использующий элемент для отображения заголовков и субтитров в видео HTML5.

Демонстрация субтитров в видео HTML5 сделана таким образом, чтобы были использованы TTML-1.0 и WebVTT. TTML уже как стандарт для полнофункционального отображения субтитров в видео HTML5 и поддерживается Adobe Flash и Microsoft Silverlight. Субтитры в видео HTML5 используется на сайтах Netflix, Hulu разместившие транслируемый контент.

Снимок экрана с прототипом, который отображает TTML и WebVTT видео титры и описание
Скрин с прототипом, который отображает TTML и WebVTT видео субтитры и описание

Прототип использует видео и отслеживает элементы, чтобы показать как TTML и WebVTT форматы могут быть использованы для отображения субтитров и описания на воспроизведённом видео. Прототип поддерживают все браузер с поддержкой HTML5.

Вы можете взаимодействовать с прототипом на сайте HTML5 Labs. Используйте View Source или инструменты браузера для проверки Javascript, который анализирует форматы TTML и WebVTT.

Элемент HTML5 Track

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

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

Текст трека использует упрощенную версию текста Web Video Track (WebVTT) или Timed Text Markup Language (TTML) своевременное текстовый файл formats.a приложения Metro стиля, в настоящее время поддерживает только временные шкала и текстовые надписи.

Обратите внимание,  чтобы создать текстовый файл для обоих форматов WebVTT и TTML смотрите демо выше.

WEBVTT

WebVTT — 8 битный формат файлов (UTF-8). Формат текстовых файлов, который выглядят следующим образом.



WEBVTT

00:00:01.878 --> 00:00:05.334
Good day everyone, my name is John Smith

00:00:08.608 --> 00:00:15.296
This video will teach you how to 
build a sand castle on any beach


Файл начинается с тегом «WEBVTT» в качестве заголовка, а затем строки. Временные сигналы в формате «ЧЧ: ММ: СС.ссс». Шкала начала и окончания времени видео, разделенные пробелом, два дефиса и знак больше (—>). Временные шкалы находятся в линию, сразу же после текста. Текст титров может быть в одну или несколько строк. Единственным ограничением является то, что не должно быть пустых строк между строками текста «MIME-тип, Текст / VTT».

TTML

Приложение Metro стиль использует подмножество форматов TTML, которые определены в спецификации TTML. Приложение Metro стиль поддерживает следующею структуру.



<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >
<body>
<div>

<p begin="00:00:01.878" end="00:00:05.334" >Good day everyone, my name is John Smith</p>
<p begin="00:00:08.608" end="00:00:15.296" >This video will teach you how to<br/>build a sand castle on any beach</p>
</div>

</body>
</tt>


TTML файл содержит версию XML, тип кодировки, объявление пространства имен, и язык, на корневой элемент («<tt>»). Далее следуют элементы «<body>» и «<div>». В элементе «<div>»  временная шкала. Фактическое время устанавливаются в качестве атрибутов (begin, end) из тега  <p> и текст закрыт тегом </p>. Пустые строки и пробелы игнорируются. Если есть несколько строк, они определяются с тегом <br/>. MIME-тип TTML файлов  приложения / ttml + XML  .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>