1.13. HTML5-видео

html5_videoРаньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент <object>, представляющий собой универсальный контейнер для внешних объектов. Подобные приложения были в малой степени интерактивными и слабо взаимодействовали с окружающими их элементами на веб-странице.

Второй подход заключался в использовании подключаемого модуля браузера, например Silverlight или Flash. И хотя технология Flash позволяла использовать готовый видеоплеер или создавать собственный, но её использование порождало большое нагромождение HTML-разметки, а видеофайлы нужно было кодировать в требуемый формат.

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

video_pleer
Рис. 1. Внешний вид видеоплеера в основных браузерах

Как добавить HTML5-видео на веб-страницу

1. Элемент <video>

Поддержка браузерами

IE: 9.0, атрибут muted — с 10.0
Edge: 12.0
Firefox: 3.5
Chrome: 4.0, атрибут muted — с 30.0
Safari: 4.0, атрибут muted — с 5.0
Opera: 11.5
iOS Safari: 3.2
Android Browser: 2.3
Chrome for Android: 44

В простом варианте HTML-разметка для размещения видеофайла на странице имеет следующий вид:

<video src="video.ogv" controls></video>

Атрибут controls отвечает за появление элементов управления видеоплеером. Вы можете добавить изображение с помощью атрибута poster, которое браузер будет использовать, пока загружается видео или пока пользователь не нажмет на кнопку воспроизведения, а также задать высоту и ширину видео.

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

<video controls width="400" height="300">
  <source src="video.mp4" type="video/mp4"><!-- MP4 для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 -->
  <source src="video.webm" type="video/webm"><!-- WebM/VP8 для Firefox4, Opera, и Chrome -->
  <source src="video.ogv" type="video/ogg"><!-- Ogg/Vorbis для старых версий браузеров Firefox и Opera -->
  <object data="video.swf" type="application/x-shockwave-flash"><!-- добавляем видеоконтент для устаревших браузеров, в которых нет поддержки элемента video -->
    <param name="movie" value="video.swf">
  </object>
</video>
Таблица 1. Атрибуты тега <video>
Атрибут Описание, принимаемое значение
autoplay Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.
controls Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость).
height Задает высоту окна для отображения видеоданных, возможные значения: px или %
loop Циклическое воспроизведение видеофайла.
muted Выключает звук при воспроизведении видеофайла.
poster URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preload Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:
auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.
metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики.
none — отсутствие автоматической загрузки видеофайла.
src Содержит абсолютный или относительный URL-адрес видеофайла.
width Задает ширину окна для отображения видеоданных, возможные значения: px или %

2. Встраиваемый интерактивный контент

Элемент <embed> определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью <embed> на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf:

<embed src="movie.mov" type="video/quicktime" width="640" height="480">
<embed src="helloworld.swf">
Таблица 2. Атрибуты тега <embed>
Атрибут Описание, принимаемое значение
height Определяет высоту встраиваемого контента в px или %.
src Содержит абсолютный или относительный URL-адрес медиафайла.
type Определяет MIME-тип встраиваемого файла.
width Определяет ширину встраиваемого контента в px или %.

3. Видеокодеки

При просмотре видео проигрыватель должен его декодировать. Одни проигрыватели используют программное декодирование видеопотока, другие используют аппаратное декодирование.

Важно! Поскольку каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео-контента во всех браузерах, видео-файл нужно размещать в нескольких форматах.

H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.

Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.

VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.

4. Видеоконтейнеры

videocont
Рис. 2. Видеоконтейнер

Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:

Ogg (.ogv, .oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для видеокодека Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg.

MPEG 4 (.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4.

WebM (.webm) — формат-контейнер с открытым исходным кодом для видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm.

Audio Video Interleave (.avi) — формат предназначен для записи звука и движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo.

Matroska (.mkv) — популярный видеоконтейнер, может содержать видео в формате H.264, VP8 или Theora.
MIME-тип: video/x-matroska, audio/x-matroska.

На данный момент браузеры поддерживают три основных видео формата:

Формат Видеокодек Аудиокодек
.mp4 H.264 AAC
.ogg/.ogv Theora Vorbis
.webm VP8 Vorbis

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

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

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm  .webm

Несмотря на то, что HTML5-видео поддерживается современными браузерами, тем не менее для Internet Explorer (9+) и Safari требуются установленные плагины Microsoft Media Player и Apple QuickTime соответственно.

5. Альтернативные медиа-ресурсы

Элемент <source> используется для указания нескольких медиа-ресурсов для <audio> и <video>. Добавляет альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

Таблица 3. Атрибуты тега <source>
Атрибут Описание, принимаемое значение
media Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
src Содержит абсолютный или относительный URL-адрес медиафайла.
type Определяет MIME-тип медиафайла.

6. Добавление субтитров и заголовков

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

Таблица 4. Атрибуты тега <track>
Атрибут Описание, принимаемое значение
default Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент <track> может содержать данный атрибут.
kind Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения:
captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей).
chapters — добавляет названия глав в виде списка для навигации по медиафайлу.
descriptions — добавляет звуковое описание происходящего в видео (для невидящих пользователей).
metadata — метаданные, используемые скриптами, не отображаются для пользователей.
subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src Содержит абсолютный или относительный URL-адрес аудио- или видеофайла.
srclang Язык воспроизводимой дорожки.

7. Пример: размещаем видео на сайте

1. Декодируем видео в три файла с соответствующими видео и аудиокодеками:
для .mp4 — H.264/AAC,
для .webm — VP8/Vorbis,
для .ogv — Theora/Vorbis.
2. Добавляем поддержку MIME-типов в файл .htaccess.
3. Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:

<video controls width="660" height="500" poster="/examples/media/martynko.png" preload="none">
  <source src="/examples/media/martynko.mp4" type="video/mp4">
  <source src="/examples/media/martynko.webm" type="video/webm">
  <source src="/examples/media/martynko.ogv" type="video/ogg">
</video>

4. Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент <video> в контейнер <div> с присвоенным классом, для которого задаются ширина и высота, соответствующие размерам вашего видео. Далее, с помощью css-свойств можно задать отступы, выравнивание на странице и т.д.

8. Видеоконвертеры

  • movavi

    Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.

    Подробнее

  • video-convert-online

    ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать любые медиа-файлы из одного формата в другой.

    Подробнее

  • firefogg

    Firefogg — модуль расширения для Firefox, может создавать видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.

    Подробнее

  • Giorgio Guitariny

    как видео встроить в письмо, с возможностью просмотра на «месте»

  • Giorgio Guitariny

    Есть такой код?

  • MrMarvel [S30]

    Вопрос я добавляю видео из интернета типа .3gp и ошибка MIME тип — я написал (в javascript’е создавал) type = ‘video/3gp’ и ему недостаточно помогите я не знаю кодекс 3gp — например как у .mp4 type = ‘video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘ и всё норм у .mp4! Помогите с .3gp и я писал URL в src!

    • Браузеры поддерживают три основных видео формата — .mp4, .ogg и .webm. Видео других форматов, добавленное через тег , на сайте отображаться не будет. Формат .3gp — это формат для мобильных телефонов, для него характерны небольшой размер файла и низкое качество воспроизводимых кадров. Как вариант, можно перекодировать файл в указанные форматы, так как добавление одного формата не обеспечит воспроизведение видео во всех браузерах.

  • Alexander Tichonov

    Проигрывание видео в обратную сторону возможно? Если да — буду благодарен за подсказку.)

    • У элемента video есть JavaScript API, с помощью которого можно управлять видеоплеером. Если для свойства playbackRate установить отрицательное значение, то в IE 10 видео будет воспроизводиться в обратном направлении, правда без звука. В других браузерах такой прием не срабатывает.

      • Alexander Tichonov

        Спасибо за подсказку) Тут звук разумеется и не нужен)

        Значит решения для всех браузеров с поддержкой до IE9 нет?.. Придётся создавать ещё одно подготовленное видео. Не хотелось увеличивать вес.

        • Пожалуйста) По всей видимости единственный вариант — два файла.

  • Vlad Chistyakov

    Вопрос от чайника: а) не понял как решить пункт 2 примера в главе 7: «Добавляем поддержку MIME-типов в файл .htaccess.» б) Что это за файл? Описание ранее тоже неоднозначно: «Чтобы убедиться, что веб-браузер умеет обрабатывать видеофайлы, нужно создать файл .htaccess в папке, где находится веб-страница, определяющая MIME-типы для видео»

    • 1) Видео файлы хранятся на сервере
      2) Чтобы видео передавалось с сервера с коректными MIME-типами в заголовках и соответственно, воспроизводилось в браузере, нужно добавить их поддержку
      3) .htaccess — это файл дополнительной конфигурации веб-сервера, это обычный текстовый файл с расширением .htaccess, его можно создать на сервере или загрузить на сервер
      4) Файл .htaccess может быть размещен в корневом каталоге веб-сервера — в каталоге www. В этом случае директивы (короткие команды) из .htaccess действуют по всему веб-серверу.
      Также .htaccess может находиться и в конкретном подкаталоге сервера. Тогда директивы, которые указаны в этом файле, «перекрывают» действие директив из «основного» файла, который размещен в каталоге www или в любом каталоге более высокого уровня.
      5) Веб-страница, определяющая MIME-типы для видео — это ваша страница сайта, на которой вы разместили html5 video

  • Ванич

    У меня одного видео не воспроизводится?

    • Уточните, пожалуйста, тип устройства, браузер и его версию, а также вид операционной системы.

      • Ванич

        Android, браузер гугл хром, версия незнаю, устройство телефон.

  • AlexBBB

    Здравствуйте, подскажите пожалуйста можно ли использовать этот тег для передачи видео с другого сайта, например как передается через фрейм с ютуба?

    • Здравствуйте. Видео в нужных форматах может храниться на любом сервере. Поэтому вы можете их использовать на своём ресурсе. Такой способ называется хотлинк (hotlink). Хотлинки могут перегружать сервер первоисточника, поэтому файлы могут быть защищены от использования сторонними ресурсами.

      • AlexBBB

        Спасибо за ваш ответ, а если видео загружается в режиме онлайн например с вебкамеры, или при помощи программ видео захвата рабочего стола на определенный сайт, есть ли возможность использовать тег для загрузки на другой?

        • Просто взять ссылку на файл с потоковым видео и добавить в тег — нельзя. Основная проблема в том, что потоковое видео передаётся по протоколам rtmp/rtp, а браузеры поддерживают http.
          Как альтернативный вариант посмотрите https://bitmovin.com/player/ и https://www.radiantmediaplayer.com (сразу отмечу — сама не использовала).

          • AlexBBB

            Благодарю за помощь, возможно что-то подойдет, буду погружаться дальше в эту проблему)

          • Пожалуйста!

  • Добрый день. Посмотрите этот пример http://codepen.io/dudleystorey/pen/knqyK.

  • Иришка Илюченко

    Здравствуйте. Такая проблема: мини-видео-плеер сайта в мобильной версии стороннего сайта имеет некорректно большой размер. Как можно это исправить, чтобы в Полной версии оставался прежний?

    • Здравствуйте. По всей видимости, ширина плеера (width) имеет фиксированное значение. То есть видео-плеер не адаптивный. Посмотрите приёмы создания адаптивного видео в этом уроке http://html5book.ru/adaptivnoe-video/. Или напишите ссылку на сайт (публиковать не буду).

  • Vladislav Zhilchenko (Ubesmi)

    Здравствуйте, как с вами можно связаться? Я сделал сайт визитку с фоновым видео и музыкой. С компьютерной версии все идеально работает. С мобильной версии ни музыки не видео нету. Как быть?

    • Здравствуйте, в подвале сайта есть ссылка на почтовый ящик.

  • смотреть готовый файл хорошо, а как смотреть поток с вебкамеры? обычной usb.
    кучу примеров нашел как я себя вижу в браузере через свою камеру в ноутбуке. а чтобы меня видели несколько человек такое возможно? я дома, адрес динамический. Пока я нашел только решение на медиасервере с использованием в браузере флэш плейера. Установил на виртуальной машине линукс и RED5 сервер. Все работает. Как для локалки пойдет. Для публичного вещания можно выделенный сервер арендовать. Но поскольку весь мир пытается от него отказаться, тем более что в HTML5 для этого пишут все есть, хочется сделать на нем.

    • Я уже отвечала про потоковое видео в комментариях на этой странице, посмотрите, пожалуйста, мой ответ пользователю AlexBBB.

  • Bender

    Здравствуйте! Скажите, а можно ли отдавать видеоплееру не ссылку на видео файл, а сырые байты, т.е. суть в том что я хочу получить у сервера по UDP поток с видео, обработать и отдать плееру для воспроизведения.
    Спасибо!

    • Здравствуйте. HTML5 видео позволяет разместить на странице видеопроигрыватель. Элемент video может содержать один или несколько источников видео. Поддерживаемыми форматами видео являются webm, mp4 и ogg. Потоковое видео имеет другие форматы, например, mpeg. Для просмотра потокового видео пользователю нужен специальный проигрыватель, который декодирует данные и выводит расшифрованное изображение на экран. В будущем, как только будет обеспечена поддержка соответствующих форматов, эти ограничения будут убраны.

      • Bender

        Спасибо. Очень жаль что video этого не поддерживает. А может быть есть смысл использовать тогда какой ни будь сторонний плеер, к примеру что-то оупенсорсное?

        • Конечно можно. Единственное, на практике с подобной задачей не сталкивалась, поэтому порекомендовать работающий плеер не могу.

  • Rudy

    Почему иногда на тегах , controls пишется controls=»controls»/> или это для xhtml?

    • Данный атрибут является логическим и поэтому его значение указывать не обязательно, так как само присутствие атрибута означает true, а отсутствие — false. Однако, логическим атрибутам должно быть присвоено значение, если вы отдаёте страницу как XHTML.

      • Rudy

        Огромное спасибо за ответ прошу прощения за не приветливость!

  • Ilya

    Подскажите пожалуйста, есть ли возможность подключения альтернативных control pad’ов для управления воспроизведением добавленного видео, или реализована возможность использования только проигрывателя установленного в браузере? Заранее спасибо!)

    • Можно создать собственные кнопки управления. Завтра сделаю простой пример.

      • Ilya

        Спасибо большое! Оставьте пожалуйста тут ссылку на пример) Если конкретнее, не могу понять, как добавить кнопку воспроизведения в середину самого видео, как она отображается в большинстве браузеров, но почему то не в Crome…там почему-то только слева от полоски-трекера…

        • Чтобы убрать элементы управления, нужно не указывать атрибут controls. Простой пример, создающий кнопку паузы-воспроизведения http://codepen.io/html5book/pen/zNEXag.
          Чтобы не разрабатывать проигрыватель самому, можно взять бесплатный, настраиваемый посредством JavaScript. Это http://videojs.com или http://www.jplayer.org.

          • Ilya

            Спасибо, буду разбираться)

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

          • Ilya

            Не совсем понятно следующее, если я делаю сайт, то мне нужно позаботиться о том, чтобы независимо от того, с какой машины с каким браузером он будет открыт, контент и структура отображались одинаково. Таким образом, чтобы обеспечить центролизованность используемых модулей, в том числе, уже готовых проигрывателей, нужно устанавливать их на сервере, с которого пользователь будет загружать сайт, при переходе на него в своем браузере? С использованием JS всё понятно, если код валидный, то он везде одинаково работает, а вот с использованием уже готовых решений, повторюсь, не совсем понятно как реализовать данные требования…?!)

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

          • Ilya

            Спасибо, буду пробовать)

          • Пожалуйста)

  • userAlexander

    Есть баг с атрибутом «autoplay».
    Если он указан, то на некоторых мобильных девайсах открываться видео в нативном попапе после загрузки страницы.
    Поэтому лучше использовать jQ плагины)

    • Спасибо за наблюдение. Не могли бы вы привести модели устройств для примера?

  • Pavel

    Здравствуйте, как воспроизвести видео при щелчке на poster?

  • Maks Z

    Классный мультик))

  • Anatoly

    Cпасибо, забавный мультик 🙂

    • Пожалуйста! Согласна :-))

      • Anatoly

        И да, милый сайтик, случайно набрел. Симпатично и локанично все)