Html5 тег video: Атрибут autoplay | htmlbook.ru

Содержание

Аудио и видео в HTML5

❮ Назад Вперед ❯

До появления HTML5 звуковые файлы добавляли на веб-страницы, интегрируя фоновый звук при помощи тега <bgsound>. Файл проигрывался во время просмотра страницы, и у пользователя не было возможности выключить. С появлением в HTML5 нового тега <audio> звуковые файлы добавляются со встроенным программным интерфейсом, и нет необходимости подключать сторонние модули.

Для добавления аудиофайлов на веб-страницу используется элемент <audio>. Путь к аудиофайлу указывается атрибутом src, а атрибут controls добавляет панель управления (кнопка запуска, прокрутка, регулятор громкости).

В коде выглядит это так:

<audio src="name.ogg" controls></audio>

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

При указании различных форматов файлов мы рекомендуем указывать MIME-тип для каждого файла, чтобы дать возможность браузеру локализировать поддерживаемый им файл. Задается MIME-тип при помощи атрибута type.

<audio controls>
  <source src="name.ogg" type="audio/ogg">
  <source src="name.mp3" type="audio/mpeg">
</audio>

Самыми популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. Несмотря на популярность среди пользователей, телевизионные компании и радиостанции используют более современные кодеки ISO-MPEG, такие как AAC или MPEG-H.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, обеспечивает более высокое качество звучания при той же или более сильной степени сжатия.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, однако недостаточно широко поддерживается аппаратными проигрывателями.

До появления стандарта HTML5 для добавления видео на сайт использовались сторонние плагины вроде QuickTime, RealPlayer или Flash. В HTML5 появился новый тег <video>, который используется для вставки вставки видео на веб-страницу.

В коде это выглядит так:

<video src="example.webm." controls></video>

Атрибут src указывает путь файла, а атрибут controls используется для отображения элементов управления. (Подробнее об атрибутах тега <video>).

Каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео во всех браузерах, видео-файл нужно размещать в нескольких форматах. Как и в случае с аудиофайлами, форматы видео файла содержатся в элементе <source> форматы, начиная с более предпочтительного. Также для каждого видеофайла необходимо указывать MIME-тип, который задается атрибутом type.

Чтобы убедиться, что браузер умеет обрабатывать видеофайлы, создайте файл .htaccess в папке, где находится веб-страница, которая определяет MIME-типы для видео:

Пример

<video controls>
  <source src="video.mp4" type="video/mp4"><!-- для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 -->
  <source src="video.webm" type="video/webm"><!-- для Firefox4, Opera, и Chrome -->
  <source src="video.ogv" type="video/ogg"><!-- для старых версий браузеров Firefox и Opera -->
</video>

На данный момент существует 3 основных формата видео: MP4/MPEG-4, OGG и WebM +. Для сжатия видеоданных и их восстановления используются кодеки.

Для видео файла формата MPEG-4 используются видео кодек Н.264 и аудио кодек ААС. Для использования кодеков необходимо получить лицензию.

Для видео файла Ogg используются видео кодек Theora и аудио кодек Vorbis с открытым кодом.

Для видео файлов в формате WebM + используются видео кодек VP8 и аудио кодек Vorbis. Для их использования не требуется лицензии.

Субтитры и заголовки к аудио и видео файлам добавляется при помощи элемента <track>, который используется в качестве дочернего элемента <audio> и <video>.

Для выравнивания видеоплеера на странице, поместите элемент <video> в контейнер <div>, присвойте класс, для которого задайте ширину и высоту, соответственно размерам вашего видео.

Всеохватывающий взгляд на элемент HTML5 track

В настоящее время аудио— и видеофайлы являются обычным явлением в сети. Интернет более не основывается только на текстовых файлах. Видео повышает результативность поиска на 40%. Если рассматривать со стороны пользователя, мультимедийные файлы повышают уровень взаимодействия, а также несут развлекательную функцию. С другой стороны, для

разработчика сайта разместить такие файлы было трудноразрешимой задачей до тех пор, пока не появился элемент HTML5 track.

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

Элемент <track> обозначает любой текст, который вы хотите показать одновременно с проигрываемым медиафайлом. Этот текст может содержать субтитры, подписи, разделы или метаданные.

Иначе говоря, элемент <track> позволяет вам указать дополнительные синхронизированные по времени текстовые файлы, которые совмещаются со шкалой воспроизведения аудио или видео.

Элемент <track> является пустым элементом, т.е. после него не нужно ставить закрывающий тег (это значит, что он является пустым элементом). Этот элемент должен быть внутри тегов <audio> и <video>. Также, в случае наличия любого элемента <source> внутри <audio> или <video> тега, элемент <track> должен идти после элемента <source>.

Пример:

<video controls>
  <source src="some_video.mp4" type="video/mp4">
  <source src="some_video.ogg" type="video/ogg">
  <track src="some_video_subtitles.srt"
         kind="subtitles"
         srclang="en"
         label="English_subs">
</video>

Атрибут src

Данный атрибут определяет адрес источника для текстового файла, который содержит данные о дорожке и поэтому, разумеется, является обязательным атрибутом. Путь к файлам должен быть абсолютным или относительным. Это значит, что файлы необходимо загрузить на интернет-сервер; нельзя использовать <track> элемент с такими адресами, как файл://URL.

Например:

<track src="video_captions. srt">

Атрибут scrlang

Scrlang определяет язык данных, которые синхронизируются по времени. Данный атрибут нужно обязательно включить, если значение субтитров установлено в атрибуте kind (подробнее об этом вы узнаете ниже). Значением атрибута scrlang должен быть действительный языковой тег BCP 47. Например, значение hi используется для хинди, а en означает английский язык. В настоящее время доступно более 8000 языковых субтегов.

<track src="video_subtitles.srt" kind="subtitles" srclang="en">

Вышеуказанный пример кода указывает, что языком синхронизированного текста является английский. Атрибут kind

Атрибут kind

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

Subtitles

Обычно это перевод речи, которая звучит в видео- или аудиофайле. Они пригождаются в том случае, если юзер не понимает язык оригинальной аудиодорожки, но может читать текст диалогов на выбранном языке. Указание на конкретный язык источника является обязательным. Это осуществляется путем добавления к атрибуту scrlang соответствующего значения:

<track src="video_subtitles.srt" kind="subtitles" srclang="en">

Captions

Подпись (caption) – это краткое описание, которое отображается на экране в процессе воспроизведения видео. Данное значение можно использовать для передачи пользователю соответствующей информации или в том случае, если звук неясный или его вообще не слышно. Ниже простой пример:

<track src="video_captions.srt" kind="captions">

Descriptions

Как уже ясно из названия, эти значения используются для того, чтобы описать содержание медиафайла. Целесообразно использовать это значение при просмотре видео слепыми людьми и в том случае, если изображение недоступно или затемнено. Синхронизированные треки, которые обозначаются как описания, обычно указываются как отдельная аудиодорожка. Например:

<track src="video_descriptions. srt" kind="descriptions">

Metadata

Это значение предназначено для синхронизированных треков, которые содержат данные о данных. Обычно они не видны в браузере пользователя. Метаданные используются скриптами, такими как Java Script. Например:

<track src="video_metadata.srt" kind="metadata">

Сhapters

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

<track src="video_chapters.srt" kind="chapters">  

Атрибут label

Данный атрибут используется для обозначения заголовка текстового трека, присоединенного к видео/аудиофайлу. Он используется браузером во время составления списка доступных текстовых треков и предстает в виде удобного для пользователя заголовка текстового трека.

Если вы добавляете атрибут label к элементу <track>, значение атрибута label не может быть пустым, в этом случае код не будет действительным. Значение должно иметь строковую последовательность. В том случае, если конкретное значение этого атрибута не определено, браузер присвоит ему значение по умолчанию, подобно “untitled”.


<track src="video_subtitles.srt"
       kind="subtitles"
       srclang="en"
       label="English_subtitles">

В вышеуказанном примере мы можем видеть, что содержание атрибута label составляет значение “English subtitles”.

Атрибут default

Это логическое значение, которое используется для обозначения определенной дорожки как дорожки по умолчанию. Естественно, что атрибут default может использоваться только с одним элементом <track>. Данный атрибут можно использовать в том случае, если пользователь не отдал предпочтение определенному треку.

В следующем примере видно, что из указанного списка субтитров на трех языках (хинди, английский и японский), субтитры на хинди будут проигрываться как трек по умолчанию.


<track kind="subtitles" src="video_subtitles_hi. srt" srclang="hi" default>
<track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
<track kind="subtitles" src="video_subtitles_ja.srt" srclang="ja">

Теперь, когда мы изучили большую часть соответствующих атрибутов, которые вы можете применять с элементом <track>, мы можем рассмотреть общий пример, который показывает, как использовать элемент <track> вместе с элементами video и source.


<video src="sample.ogv">
  <source src="some_video.mp4" type="video/mp4">
  <source src="some_video.ogg" type="video/ogg">
   <track kind="captions" src="video_captions.srt" srclang="en">
   <track kind="descriptions" src="video_desciptions.srt" srclang="en">
   <track kind="chapters" src="video_chapters.srt" srclang="en">
   <track kind="subtitles" src="video_subtitles_en.srt" srclang="en" default>
   <track kind="subtitles" src="video_subtitles_oz.srt" srclang="oz">
   <track kind="metadata" src="video_metadata1. srt" srclang="en" label="Metadata 1">
   <track kind="metadata" src="video_metadata2.srt" srclang="en" label="Metadata 2">
</video>

Чем могут быть полезны медиа треки для SEO

Элемент <track> полностью открыл путь для поисковой оптимизации под видео и предложил более действенный способ сделать ваши видеофайлы более понятными для поисковых машин.

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

Здесь перечислены некоторые из ключевых преимуществ для SEO:

  • Улучшает позиции сайта в поисковой выдаче: В процессе поиска поисковые машины просматривают любой текст, связанный с видео.
  • Глубокие связи: Поисковые машины возвращают результаты поиска, которые указывают на определенную часть видео, связанную с временными кодами.
  • Связанный контент: текстовые файлы можно легко внедрить в связанный текстовый контент на той же странице.
  • Доступность и восприятие пользователем: Субтитры и подписи повышают практичность и доступность для людей с ограниченными возможностями.
  • Эскиз в результатах поиска: Одним из плюсов является то, что в результатах поиска страница с видео может отображаться как фрагмент с эскизом видео, что может увеличить процент перехода по ссылке.

Более подробную информацию о пользе транскриптов видео и подписей вы можете найти в другой статье.

Поддержка элемента <track> браузерами

Все вышеуказанные значения элемента <track> прекрасно поддерживаются следующими браузерами:

  • Chrome
  • Firefox 31+
  • IE10+
  • Safari 6+
  • Opera 15+

Демо-видео и выводы

Чтобы посмотреть, как действует элемент <track>, пройдите по двум ссылкам:

  • Демонстрационная страница в IE Видео
  • Пример на HTML5

Элемент <track> стандартизирует процесс соединения дорожек с данными с медифайлами. Он делает возможным использование динамичного содержимого, связанного с процессом воспроизведения медиа, что, в свой черед, повышает значимость аудио- и видео-элементов и в будущем может принести пользу поисковой оптимизации.

Источник урока: http://www.sitepoint.com/comprehensive-look-html5-track-element/

1 предыдущая статья

HTML5 Video

Зачем нужен тег Video?

Раньше видео можно было воспроизводить на веб-страницах только с помощью веб-плагинов, таких как Flash player и т. д. После выпуска HTML5 элемент видео можно использовать для добавления видеоконтента на веб-страницу.

Что такое тег видео?

HTML5 запустил элемент видео цели воспроизведения видео, частично изменив элемент объекта. Видео HTML5 планируется его изобретателями, чтобы стать новым стандартным способом отображения видео в Интернете, вместо предыдущего стандарта использования плагина Adobe Flash тег

Видео HTML5 в настоящее время широко используется в основных браузерах и поддерживается основными веб-сайтами, такими как YouTube. Элементы видео и аудио следуют одному и тому же основному синтаксису. В самой стандартной форме все, что мы хотим сделать, это использовать элемент src , чтобы добавить атрибут управления и распознать URL-адрес видео. Чтобы посетители нашего сайта могли управлять воспроизведением видео. Мы можем использовать атрибуты высоты и ширины, чтобы зафиксировать размер видеоплеера, но это не обязательно.

Преимущества —

Использование тега видео имеет два огромных преимущества —

  • Аппаратное ускорение — При воспроизведении видео в браузере с аппаратным ускорением потребляется значительно меньше ресурсов ЦП по сравнению с использованием в новом браузере.
  • Плагин бесплатный — Нам не нужно беспокоиться о загрузке правильного плагина или проблемах с воспроизведением, поскольку звук не требует плагинов.

Воспроизведение видео на веб-странице

Раньше HTML5, видео проигрывалось только в браузере с флеш-плеером (например, с плагином). Элемент HTML5

Элемент

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

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