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-разметка для размещения видеофайла на странице имеет следующий вид:

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

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

Таблица 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:

Таблица 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-типы для видео:

Несмотря на то, что 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-разметки, используя атрибуты для задания видео требуемых параметров:

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 этого не поддерживает. А может быть есть смысл использовать тогда какой ни будь сторонний плеер, к примеру что-то оупенсорсное?

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