ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Создание Video Background HTML 5

.

vidio1

Создание Video Background HTML 5

Всем привет!

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

В данной статье идет речь о создании Video Background — фоновой видео заставки HTML 5 веб страницы.

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

Video background HTML 5, вероятно, лучший способ привлечь внимание!

Поддержка HTML 5 видео

Совместимость с видео HTML5 действительно высока. Видео в HTML5 поддерживают все современные браузеры (> IE8), при этом, для просмотра не требуется установка дополнительных расширений.

Хорошее видео в фоновом режиме (video background) может легко заставить людей остановиться и изучить его, увеличивая время, которое они проводят на сайте. Это длительное время на сайте потенциально может привести к большему взаимодействию с другим содержимым на странице!!!

Для личного, либо корпоративного сайта можно снять небольшой (10-15 секундный видеоролик) и применять в качестве заставки video background. Тогда ресурс становится действительно индивидуальным и уникальным!

Итак, давайте приступим к созданию фонового видео.

Создание Video Background HTML 5 Тег VIDEO

Во первых нужно подготовить видео в трех форматах MP4, Ogg, WebM.

MP4 — Распостраненный формат, предназначенный для работы с видео и фото файлами.
Ogg — Также контейнер для передачи, хранения и работы с аудео и видео.
WebM — Собственно основной формат, сжатый. Применяется при создании и отправке HTML 5 видео и веб презентаций.

Конвертация в нужные форматы

Для конвертации видео в различные форматы существует множество программ, либо можно найти уже готовые заставки или просто скачать понравившееся видео и преобразовать сжать в нужные форматы к примеру неплохим бесплатным онлайн сервисом- http://www.online-convert.com/ru

Поддержка форматов видео современными браузерами

  • Android devices – MP4
  • Google Chrome – WebM, Ogg
  • Mozilla Firefox – WebM, Ogg
  • Opera – WebM, Ogg
  • Safari – MP4 (including iPhone)
  • Internet Explorer 9 – MP4
  • Internet Explorer 6-8 – No HTML5, flash only

Конструкция HTML 5 Video Background

Теперь разберемся подробнее что из себя представляет HTML конструкция тега video.

poster="media/videoframe.png — задает путь к скриншоту для видеозаставки, если видео недоступно, автоматически подставляется скрин, обычно используется скриншот первого кадра видео;

loop— повтор после окончания видео, бесконечное воспроизведение;

autoplay — проигрование видеоролика в автоматическом режиме, сразу после загрузки HTML 5 страницы;

muted — отключаем звук, хотя по умолчанию он и так отключен (необязательный атрибут);

<source type="video/webm" src="media/videoframe.webm"> — путь к файлу с видео в формате WebM HTML 5 видео;

<source type="video/ogg" src="media/videoframe.ogg"> — путь к файлу с видео в формате Ogg видео;

<source type="video/mp4" src="media/videoframe.mp4"> — путь к файлу в формате MP4.

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

Простейший пример создания фонового видео (Video Background)

Создается Video Background не сложнее, чем обычное фоновое изображение с использованием минимального набора CSS свойств.

Оборачиваем тег video в div class="fullscreen-bg":

Задаем минимальные CSS свойства:

Все! А вы думали будет сложнее?

Создание Video Background HTML 5 пример

Для начала создается HTML 5 разметка. Привожу полностью разметку с использованием дополнительных элементов, таких как заголовок, описание и кнопка-ссылка.

HTML код:

Ну и CSS разметка, используемая в данном примере.

CSS код:

На самом деле при создании Video Background можно импровизировать с HTML 5 разметкой и CSS свойствами, в зависимость от задач, поставленных веб разработчику. Поэтому к статье и приложены 2 примера для создания классных заставок и фонового видео.

На этом все друзья.

БЕРЕГИТЕ СЕБ!



Читайте также:


лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

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