Как встроить видео на страницу при помощи HTML5, тег video
23.07.18 ИТ / HTML 3418
Сделать проигрывание видео на сайте – сегодня потребность в реализации такого функционала встречается довольно часто. Раньше для этого использовался тег object и сторонние средства, различные плагины, чаще всего популярный flash-плеер. Но с развитием веб-технологий все упростилось, теперь для проигрывания видео на сайте достаточно применить один тег – video.
Посмотрим ниже, как использовать новый тег video. Также не стоит забывать, что можно применять CSS-стили для придания уникального внешнего вида плееру. Базовый код для размещения плеера такой:
<video src="file.mp4" controls></video>
Что касается атрибутов, то здесь часть из них работает также как в теге audio. Атрибут controls сообщает браузеру, что нужно показать кнопки управления плеером, src – указывает путь к файлу.
Для разных браузеров следует задать разные форматы видео, так как поддержка видеокодеков у них различается. Делается это при помощи вложенного тега source. А так как некоторые браузеры все еще могут не поддерживать новый тег, то лучше применить универсальное решение, в котором будет использован тег object для старых браузеров:
Как видно, следует указывать MIME-тип для каждого файла. Для того, чтобы удостовериться, что браузер может обрабатывать видео в нужном формате, можно создать файл .htaccess в папке, где находится Ваша веб-страница, определяющая MIME-типы для видео:
AddType video/webm . webm
AddType video/mp4 .mp4
AddType video/ogg .ogv
Какие видео кодеки и форматы поддерживаются браузерами? Посмотрим ниже:
WebM/VP8 — поддерживается в Chrome, Firefox4, Opera;
MP4 – поддерживается в Windows Phone 7, Safari, IE9, iPhone, iPad, Android;
Ogg/Vorbis — поддерживается в старых версиях браузеров Firefox и Opera.
Какие есть атрибуты у тега video? Перечислим ниже:
autoplay — авто воспроизведение видео после загрузки страницы;
controls — показать элементы управления;
height — высота плеера в px или %;
loop — циклическое воспроизведение файла;
muted — выключение звука при воспроизведении файла;
poster — путь к картинке, которая будет показана во время загрузки видео или пока не начать показ видео. Не обязательно, если не задано, то будет показан первый кадр видео;
Внутрь тега video можно вставить тег track для задания различной информации о видеофайле. Использование атрибутов тега track похоже на использование атрибутов при применении этого тега внутри тега audio.
При добавлении видео на страницу следует также позаботиться о подготовке видеофайлов в нужных форматах. Для этого можно использовать различные видеоконвертеры.
Таким образом, разместить видео на страницу стало совсем просто. Благодаря новому тегу HTML5 стало возможным делать видеоплееры высоко функциональными, удобными и в то же время простыми.
Как использовать форматы видео HTML5?
До появления HTML 5 не существовало стандартного формата для демонстрации видео на веб-страницах. Видео HTML 5 дает вам свободу вводить элемент видео в ваш браузер. Он частично заменяет элементы объекта, делая его более интересным и захватывающим для зрителей. Это новая технология, которая была разработана с целью показа видео в Интернете без использования каких-либо плагинов. Раньше видео HTML5 воспроизводились только с помощью Flash Player.
Краткий обзор видеоформата HTML 5
Этот новый стандартный элемент видео был представлен Opera Software в феврале 2007 года. Компания представила специальный код, который можно использовать для встраивания видео на вашу веб-страницу, называемую WebM.
Как использовать элемент видео HTML5?
Вы можете использовать этот код для встраивания видео на свои веб-страницы
<управление видео src="movie. webm" poster="movie.jpg">
Например:
<управление видео>
Ваш браузер не поддерживает видео тег.
Работа с форматом видео HTML5
Атрибут «Управление» добавляет элементы управления видео, такие как пауза, воспроизведение, остановка, громкость и т. д. Поэтому рекомендуется использовать атрибуты высоты и ширины. Если вы не установите предел размеров по высоте и ширине, браузер не сможет определить размер видео. Это приведет к мерцанию страницы во время загрузки видео.
Текст между тегами будет отображаться только в тех браузерах, которые не поддерживают элемент видео.
Вы можете создавать ссылки на различные видеофайлы, используя несколько элементов . Браузер будет использовать первоначальные воспринимаемые форматы.
Как внедрить автовоспроизведение в формате видео HTML5?
Если вы хотите, чтобы браузер запускал видео автоматически, то можно ввести, например, атрибут автоматического воспроизведения;
<автозапуск видео>
mp4" type="video/mp4">
Ваш браузер не поддерживает видео тег.
Поддерживаемые форматы видео
В настоящее время элемент видео поддерживает три видеоформата: MP4, WebM и Ogg.
В HTML5 нет спецификаций относительно того, какой тип видео должен поддерживаться различными браузерами. Пользовательские агенты имеют полную свободу использования любого типа видео, который они сочтут подходящим. Тем не менее, рабочая группа HTML5 сделала желательным, по крайней мере, один тип видео, который поддерживается всеми браузерами. В связи с этим идеальный формат видео должен:
• Быть свободным от авторских отчислений.
• Обладают хорошим качеством сжатия, хорошим качеством изображения и низкой загрузкой процессора декодирования.
• Иметь аппаратный видеодекодер вместе с программным декодером, поскольку многие из встроенных процессоров не обладают уровнем производительности для декодирования видео.
Таким образом, используя этот простой тег HTML5 на своей веб-странице, вы можете сделать ее более интерактивной для своей аудитории и повысить уровень их интереса.
Скачать бесплатно
Тег отслеживания видео HTML5 | Справочный центр Piwik PRO
Доступно с версии 16.5.0
Диспетчер тегов
Тег HTML5 для отслеживания видео помогает собирать данные о взаимодействии с видео на вашем сайте или в приложении. После настройки этого тега вы сможете видеть собранные данные в отчетах видеоаналитики.
Чтобы создать и настроить тег отслеживания видео HTML5, выполните следующие действия:
Перейти к Меню > Диспетчер тегов .
Перейти к тегам .
Щелкните Добавить тег .
Назовите тег и выберите следующий тип:
Отслеживание видео HTML5 .
Щелкните Далее .
Настройте следующие элементы:
Отслеживание прогресса: Если этот параметр включен, вы будете отслеживать пороговые значения в процентах и временные метки взаимодействия.
Отслеживание только видео с выбранными селекторами CSS: Если этот параметр включен, вы будете отслеживать только видео с указанными селекторами CSS.
Чтение заголовков видео из атрибута HTML: Если этот параметр включен, вы будете использовать атрибут HTML для записи заголовков для отслеживаемых видео.
Отслеживание уровня громкости как пользовательское измерение: Если этот параметр включен, уровень громкости будет отслеживаться в процентах. Он будет сохранен как пользовательский параметр.
Примечание: Если вы отслеживаете уровень громкости как настраиваемый параметр, создайте настраиваемый параметр в разделе Аналитика > Настройки > Пользовательский параметр и введите здесь имя или идентификатор измерения.
В Расширенных настройках тега выберите Тип согласия . Настройте его, если вы используете форму согласия на своем сайте. Этот тег будет активироваться только для посетителей, давших согласие на выбранный тип согласия.
Отказ от участия и DNT по умолчанию включены. Оставьте все как есть, если вы хотите уважать посетителей, которые установили функцию «Не отслеживать» в своих браузерах, или посетителей, которые отказались от отслеживания с помощью нашей формы отказа.
В Даты вылета установите дату и время срабатывания тега.
В Триггеры тегов щелкните Выбрать существующий триггер .
Выберите следующий триггер: Все просмотры страниц .
Примечание: Вы также можете установить новый триггер, который будет запускать этот тег на выбранных страницах.
webm
webm
Не обязательно, если не задано, то будет показан первый кадр видео;
webm" poster="movie.jpg"> 
Настройте его, если вы используете форму согласия на своем сайте. Этот тег будет активироваться только для посетителей, давших согласие на выбранный тип согласия.