Видеофон для сайта uCoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Видеофон для сайта uCoz


Описание:

Иногда на промо-страничках или landing page, применяют такое интересное решение, как видеофон (video background). Главный плюс такого эффекта - это выделиться среди подобных сайтов.

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

Поэтому давайте разберем, как такие видеофоны создаются.

HTML:

Главной основой такого фона, является тег video, который появился в HTML5. Его можно расположить перед закрывающим тегом body.

Обратите внимание на атрибуты тега video:
  • autoplay - делает так, чтобы видео начало воспроизводиться автоматически, сразу же после загрузки страницы.
  • loop - начинает повторное воспроизведение видео после его окончания.
Код
<video id="video_bg" autoplay="autoplay" loop="loop">
          <source src="video/background.mp4" type="video/mp4"></source>
          <source src="video/background.webm" type="video/webm"></source>
</video>

И также обратите внимание на формат видео, если вы хотите добиться воспроизведения видеофона в большинстве браузеров, то ваш ролик должен быть как минимум в двух форматах в MP4 и WebM.

Важно: при конвертации видео в формат MP4, обязательно выберите видео кодек H.264, иначе ваше видео не будет воспроизводиться в браузере IE.

CSS:

Чтобы наше видео стало именно фоном, то для него необходимо задать ряд CSS свойств.
Код
body {
          /* Задаем фон для нашей страницы в виде обычного изображения.       
          Это нужно на случай, есть браузер не смог воспроизвести видео из-за того,       
          что он не поддерживает тег video. */
          background: fixed url(images/video_bg.jpg) no-repeat;
          background-size: cover;
}
             
#video_bg {
          /* Делаем так, чтобы видеофон занимал фиксированное положение. */
          position: fixed;
          top: 0;
          left: 0;
          /* Располагаем наш фон под всем содержимым на странице.       
          Для этого используем отрицательный z-index. */
          z-index: -1000;
          /* Растягиваем видео так, чтобы не было видно черных полос и       
          чтобы независимо от разрешения экрана видеофон занимал все рабочее пространство. */
          min-width: 100%;
          min-height: 100%;
          width: auto;       
          height: auto;       
}

Центрирование видеофона:

Код CSS:
Код
@media (min-aspect-ratio: 16/9) {
          #video_bg {
              height: 300%;
              top: -100%;       
          }
}
             
@media (max-aspect-ratio: 16/9) {
          #video_bg {
              width: 300%;
              left: -100%;
          }
}
             
@supports (object-fit: cover) {
          #video_bg {
              top: 0;       
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
          }
}

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

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.01.2016 в 07:00
Материал просмотрен: 2027 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо
Источник

3 комментария


mihail
Вася @mihail 17.01.2016 10:411
+2
Спасибо, интересно получается like like like
Ромчик
Пожалуйста. Не забывайте, что такими решениями злоупотреблять нельзя!
avatar
Олег Хан @Oleg7777 17.01.2016 17:403
0
1. Надо еще на видеофон программным методом накладывать мелкую горизонтальную сетку, это помогает при большом растяжении экрана нивелировать ухудшение качества отображения пикселов и какой бы огромный монитор не был, потеря качества видео не будет заметна. Видел такие решения на западных сайтах и там как раз это сделано горизонтальная сетка поверх видео.
2. Зачем конвертировать и складывать на свой сервер видео? Не проще ли его взять с youtube, youtube сам определяет, что за девайс и подставляет видео в нужном формате и нужного качества и с нужным битрейтом. Уже один из Российских конструкторов сайтов как раз так и сделал, у них на сайт можно поставить любую текстуру, фото или просто ссылку на youtube и тогда фон становится видео и никаких нагрузок на собственный сервер. И там еще реализована автоматическое скрытие части видео, в основном сверху и снизу, что бы вписалось видео в разрешение браузера клиента. Для бизнес целей получается очень даже неплохо, заходит клиент на сайт и сразу видит как твоя фирма выполняет заказы (к примеру, печет торты) и всё это прямо под текстом с ценами и услугами. Отличная возможность для повышения конверсии сайта.
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта