регистрация
856материалов
3280комментариев
235тем на форуме
6815пользователей

Видеофон для сайта 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
Материал просмотрен: 2699 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

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

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


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