На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.
Рекомендации Если вы твердо убеждены, что хотите установить видео для фона на сайте, необходимо знать кое-какие нюансы:
Во-первых, нужно обязательно помнить о том, что видеоролик имеет довольно большой вес. Это может негативно сказаться на скорости загрузки страницы, особенно если у пользователя медленный интернет. Поэтому выбирайте не слишком продолжительные по времени видеоролики. В случае, когда требуется использовать довольно длинное видео, будьте готовы либо к работе над уменьшением его веса, либо к тому, что придется жертвовать частью аудитории. Во-вторых, избегайте автовоспроизведения звука из видео. Используйте либо ролики без аудио, либо добавьте возможность пользователю самому включить звук, если ему это понадобится. Автоматическое воспроизведение звука при открытии сайта считается очень дурным тоном. В-третьих, нужно позаботиться о кроссбраузерности и корректном отображении и воспроизведении видео на всех устройствах, а также предоставить альтернативу видео (для тех случаев, если оно не воспроизведется). Ниже в нашем примере мы покажем, как это сделать. И в-четвертых, стоит хорошо подумать, уместен ли видеофон на том сайте, где вы захотели его установить, поскольку очень легко переступить грань между оригинальностью и бесполезностью данной затеи. Видео ни в коем случае не должно отвлекать пользователя от его главной цели, по причине которой он пришел на сайт. Устанавливая видео-фон под текстовым содержимым, не забудьте проверить, насколько читабельным стал текст. Например, он может слиться с фоном в определенный момент проигрывания видеоролика (белый текст на белом фоне, черный на черном и т. п.). 1. HTML Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока
Для тега указаны следующие атрибуты:
width – ширина области для воспроизведения ролика; height – высота области; preload – загрузка видео вместе со страницей; autoplay – автоматическое воспроизведение видео; loop – циклическое повторение видео; poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно. Далее у нас записано два тега , где указаны URL-адреса видео в разных форматах – MP4 и WEBM. Зачем подключать ролик в нескольких форматах? Дело в том, что не все браузеры поддерживают один-единственный формат видео. Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл хотя бы в этих двух форматах. А атрибут type с соответствующими значениями помогает браузеру быстрее определиться с выбором.
2. CSS Наша таблица стилей для фона выглядит следующим образом:
Как видно из кода, фон установлен на всю страницу, а в качестве запасного фона задано изображение (кадр из этого же видео). В самом крайнем случае будет задействован цвет фона #94a233 .
Также в коде есть директива @supports , которая проверяет, поддерживает ли браузер свойство object-fit . Если да, то фон принимает значение cover и пропорционально отображается при разных размерах экрана.
Согласно данным с сайта caniuse.com, на сегодняшний день свойство object-fit поддерживается всеми браузерами, кроме Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android Browser 4.1-4.4.
Вот и всё. Надеемся, данный урок принес вас пользу. Если у вас есть другие интересные и простые способы установки видео в качестве фона для сайта и вы хотите поделиться ими, пишите в комментариях!
Бесконечный фон для видео В этом уроке Sony Vegas:
Что такое бесшовные изображения и где их взять Бесшовные изображения — это изображения, в которых две противоположные грани являются продолжением друг друга. Проще говоря, если разрезать такое изображение на две части и поменять их местами, то при стыковке противоположных граней, шва видно не будет и рисунок не пострадает (рис. 1).
Рисунок 1. Особенности бесшовных изображений
Также, если продублировать бесшовное изображение несколько раз, и состыковать эти дубли между собой, то получится одно большое изображение с повторяющимся узором и без видимых швов (рис. 2).
Рисунок 2. Композиция из 16 бесшовных изображений
Стоит заметить, что встречаются бесшовные изображения, которые можно стыковать только по горизонтали. Ярким примером служит цилиндрическая панорама.
Другие стыкуются по всем своим граням и создают бесконечный узор, как на рисунке 2. В жизни мы часто встречаем такие узоры — это обои на стене, кафельная плитка, линолеум и т. д.
Теперь, когда мы знаем, что такое бесшовные изображения, возникает вопрос: а где их брать?
Естественно, при желании, имея начальные навыки работы в программе Photoshop можно самостоятельно сделать бесшовное изображение практически из любой фотографии. Уроков по этой теме достаточно много.
Ну и конечно, всегда можно найти готовые фото в интернете, тем более, что многие охотно делятся своими работами.
Для поиска можно использовать такие запросы:
Для нашего урока я взял «Ромашки» автора santa3, которые находятся по этому адресу http://karat773.ru/post205116275/ Там есть и другие бесшовные изображения, которые вполне подойдут при создании фона для видео. Однако вначале, для успешного усвоения урока, советую использовать именно ромашки, а так же использовать рекомендованные ниже настройки проекта. Когда вы успешно пройдете данный урок, то можете применять полученные навыки для самых разных проектов с любыми бесшовными изображениями.
Настройки проекта Для настройки проекта мы будем использовать шаблон PAL DV Widescreen. Во-первых, это один из самых распространенных форматов видео на сегодняшний день. Во-вторых, качество нашего изображения не очень высокое. Его разрешение всего 699х466. Поэтому если вам понадобится сделать фон для видео высокого разрешения, то нужно будет поискать бесшовное изображение с большим разрешением.
Итак, выбираем вышеупомянутый шаблон. Для этого, в меню «Файл (File)» выбираем команду Свойства (Properties). В открывшемся окне в поле «Шаблон (Template)» из выпадающего списка выбираем PAL DV Widescreen (рис. 3)
Рисунок 3. Настройки проекта
Для того, чтобы качество нашего футажа было высоким, и мы могли использовать его для видео, как с чересстрочной разверткой, так и с прогрессивной, в поле «Частота кадров (Frame rate)» увеличиваем значение в два раза. То есть для PAL выбираем 50,000 (Double Pal). В поле «Порядок полей (Field order)» ставим значение « None (progressive scan)». В общем, выставляем значения в точности так, как показано на рис. 3.
Скорость анимации фона Далее нужно настроить длительность показа изображений, а также длительность монтажных переходов. Эти параметры очень важны, так как они окажут влияние на скорость анимации. Если анимация движения фона будет слишком высокой, то фон для видео получится размытым. Поэтому, лучше если мы сделаем медленную анимацию, тем более, что в последствии, мы всегда можем воспользоваться ускорением видео.
Скорость движения фона для видео в каждом конкретном случаи рассчитывается индивидуально. Я лишь дам ориентировочные советы, а далее вы сами будете настраивать их по своему вкусу.
Итак, если соотношения сторон исходного изображения приблизительно равное соотношению сторон нашего видео (как наши ромашки), то нормальная скорость анимации одного цикла будет около 20-25 секунд.
Если вы работаете с широкой панорамой, то рассчитать длительность анимации можно таким способом:
Визуально делим нашу панораму на отрезки, равные соотношению сторон нашего видео. Так например, если наш проект имеет соотношение сторон 16:9, то разделив нашу панораму на такие отрезки, у нас получится чуть больше 4 отрезков (рис. 4).
Рисунок 4. Панорама разделенная на отрезки 16х9
Поэтому, ориентировочна скорость одного цикла анимации получится около 100 секунд (25 секунд умножить на 4 отрезка).
Если соотношение сторон нашего видео 4:3. то разделив панораму на такие отрезки, их получится более 5. В этом случаи скорость анимации должна быть приблизительно 125секунд (25 секунд умножить на 5 отрезков).
Но вернемся к нашим «ромашкам». Мы определились с тем, что скорость анимации в этом случаи будет равняться 25 секунд. Чтобы это настроить в меню «Установки (Options)» выберите команду «Настройки (Preferences)».
Далее переходим на вкладу «Правка (Editing)» и вводим такие значения:
Длительность показа изображений (New still image length (seconds)) — вводим значение в двое большее, чем скорость нашей анимации, то есть 50 секунд (25х2).
Далее ставим галочку в поле «Автоматически перекрывать файлы при добавлении» (Automatically overlap multiple selected media when added).
Длительность перехода (Amount (seconds)) — 25 секунд (именно это значение определяет скорость движения фона для видео). (рис. 5)
Рисунок 5. Настройки показа изображений в Sony Vegas
Подтверждаем изменение настроек (Apply, ОК).
Вставка изображения и монтажного перехода Для того, чтобы фон для видео был зацикленным, нам нужно дважды вставить бесшовное изображение, при чем так, чтобы одна копия, перекрывала другу ровно по середине. Именно для этого, мы производили настройки описанные выше.
Осталось только правильно вставить изображения на тамлайн.
Для этого, в «Окне вкладок», нажимаем вкладку «Медиафайлы (Project media)», и перетаскиваем в него нужное изображение (рис. 6)
Убеждаемся, что «курсор текущей позиции» находится точно вначале клипа. Если это не так, нажимаем кнопку «Go to start» (рис. 6)
В окне «Медиафайлы» делаем двойной клик левой кнопкой мыши по изображению с ромашками. Изображение попадет на тамлайн. Снова повторяем предыдущую операцию, чтобы вставить еще одну копию изображения.
Если все сделано правильно, то одна копия должна перекрывать другую точно по центру (рис. 6)
Рисунок 6. Вставка изображений на тамлайн
Теперь используем для нашей анимации подходящий монтажный переход Sony Vegas. Для этого переходим на вкладку «Переходы (Transitions)» и выбираем группу видеопереходов «Push» ( в русской версии скорее всего «Перекрытие»). В этой группе из всех видеопереходов нам подходят только первые четыре. От того какой монтажный переход вы выберете, будет зависеть, в какую сторону будет двигаться видеофон.
Я выбрал «Push Lift». С помощью этого перехода, фон видео будет перемещаться слева-направо.
Как вы знаете, чтобы вставить переход, нужно просто перетащить его на пересечение клипов.
Подгонка фона под проект Если на данном этапе работы с видео, мы поставим «курсор текущей позиции» на участок , где задействован видеопереход, то в окне «Предварительного просмотра» увидим, что копии нашего изображения не соприкасаются друг с другом, и между ними образовался зазор (рис. 7).
Рисунок 7. Зазор между кадрами
В данном случаи, избавится от зазора можно с помощью кадрирования. Нажимаем кнопку «Pan/Crop» (рис. 8) на одном из клипов.
Рисунок 8. Шов между кадрами
В открывшемся диалоговом окне нажимаем правую кнопку мыши на рамке «кадрирования» и выбираем команду Match Output Aspect. Таким образом, Sony Vegas автоматически обрежет фото, под размер нашего проекта.
Тоже самое проделываем и с другим клипом. После этого, зазор должен исчезнуть, и мы получим непрерывное видео без швов.
Теперь, давайте рассмотрим другу ситуацию, с которой вы рано или поздно столкнетесь.
Предположим, вы передумали, и решили сделать анимацию не справа-налево, а сверху-вниз. Для этого вы заменили видеопереход на другой — «Push Down», в котором анимация будет идти сверху вниз.
Посмотрев в окно «Предварительного просмотра» мы увидим, что на стыке изображений образовался заметны шов. Это произошло потому, что мы обрезали те края изображения, которые должны «стыковаться». Тем самым мы нарушили рисунок и испортили «бесшумность» (рис. 8).
Чтобы исправит положение, нужно отменить кадрирование на обоих клипах. Для этого мы снова нажмем «Pan/Crop», кликнем правой кнопкой мыши по рамке кадрирования, и выберем команду «Восстановить (Restore)».
Как можно заметить, шов исчез, но слева и справа образовались черные полосы (рис. 9).
Рисунок 9. Черные полосы слева и справа
Так, как использовать кадрирование в этом случае нельзя, то чтобы избавится от черных полос нам остается только увеличить размер кадра.
Для этого заходим в Track Motion, наводим курсор на угол кадра и удерживая левую кнопку мыши тянем кадр наружу, до тех пор, пока картинка в окне предварительного просмотра не заполнит весь экран.
Кстати, с помощью Track Motion можно слегка повернуть фон для видео, чтобы анимация была не строго горизонтальной или вертикальной, а двигалась слегка наискосок.
Просчет одного цикла (рендеринг) Итак, к этому моменту все что нам осталось — это правильно просчитать готовый футаж. Для начала, выделим регион, который составляет один цикл нашей анимации. Для этого делаем двойной клик левой кнопкой мыши на монтажном переходе. Таким образом, Sony Vegas должен автоматически выделить регион, который будет начинаться строго в начале видеоперехода, а заканчиваться точно в его конце (рис. 10).
Рисунок 10. Выделенный регион
Теперь, в меню Файл (File), выбираем команду «Render as («Просчитать как. », или «Визуализировать как. »)». Здесь, как обычно, выбираем куда будет сохранен видеофайл то, как он будет называться и поставить галочку в поле «Render loop region only», чтобы визуализировать только выделенный регион (рис 11).
Рисунок 11. Просчет только выделенного региона
Далее нужно выбрать тип файла. В идеале, конечно нужно выбрать AVI, и сохранить футаж без компрессии, нажав кнопку «Custom. » и введя такие настройки (рис. 12).
Рисунок 12. Настройки просчета без компрессии
Полученный видеофайл, естественно, будет очень большим, а хранить большое количество футажей с таким качеством довольно проблематично. Тем более, что это всего лишь фоновое видео. Я думаю, что мы вполне можем сжать наш футаж, например в mpg2.
Итак, «Render as», тип файла Main Concept MРЕG-2 нажимаем кнопку «Custom. », и выставляем такие настройки (рис. 13).
Рисунок 13. Настройки просчета в MРЕG-2
По моему мнению, фон видео с такими параметрами вполне подходящий вариант для многих типов проектов.
Использование бесконечного фона для видео На протяжение этого урока Sony Vegas, мы с вами научились делать футажи из бесшовных изображений, которые можно использовать в качестве фона для видео.
Теперь давайте проверим наш футаж «в действии».
Создадим новый проект и поместим на него сделаный фон для видео. Наведем курсор на правый край клипа и нажав левую кнопку мыши начнем «растягивать» клип вправо. При таком «растягивании» Sony Vegas создает видеофайл, в котором исходный видеофайл повторяется несколько раз.
То место, где заканчивается полный цикл и начинается новое повторение отмечается треугольным вырезом (рис. 14).
Рисунок 14. Повторение циклов
Если все сделано правильно, то во время просмотра на месте «стыков» не должно быть видно никаких швов, смещений, или каких либо других артефактов. Видео должно идти так, как будто оно цельное. Таким образом, мы можем растягивать его на любую длительность что очень удобно.
Я надеюсь, что данный урок Sony Vegas будет вам полезен и вы найдете применение сделанным футажам.
Идея урока, возникла в результате вопроса нашего читателя под ником videolubitel, в котором он спрашивал как зациклить панораму. За это ему большое спасибо, лично мне идея понравилась.
10 рекомендаций по использованию фонового видео на сайте
Последние несколько лет мы все чаще видим сайты, использующие фоновые видео в качестве элемента дизайна. И этот тренд будет только расти, ведь скорость интернет соединения увеличивается, видеокодеки совершенствуются, а браузерная поддержка HTML5 видео становится все шире.
При плохой реализации фоновое видео может вызвать негативные последствия в виде замедления скорости страницы, отвлечения пользователя от ее основного содержимого и даже ухудшения самочувствия пользователей, если в видео слишком много движения или панорамирования.
Однако при хорошей реализации, фоновое видео может сработать как легкое касание дизайна, добавляющее сайту новый слой восприятия.
Так как нам избежать ошибок и сделать все правильно? Легко, просто следуйте этим 10 советам.
Сжимайте видео, насколько это возможно Нет ничего хуже, чем посещение сайта, фоновое видео на котором постоянно спотыкается при попытках буферизации. Это отвлекает и создает ощущение, что весь сайт тормозит, даже если все остальное содержимое уже загружено.
Чтобы избежать этого, надо сжать видео до минимального приемлемого для нас битрейта. Есть соблазн использовать высококачественное видео в разрешении 1080p, чтобы повысить четкость и красоту, но это совершенно не стоит компромисса с увеличением времени загрузки и прерываемым стримингом.
Вам стоит использовать видео 720p с низкой частотой кадров (24-25 кадров в секунду) и протестировать несколько разных битрейтов от 750k до 1250k. Также есть несколько хаков, которые помогут скрыть низкое качество видео, но о них чуть позже.
Используйте наложение для скрытия артефактов
Если вас не радует качество вашего видео, или же у видео, устраивающего вас качества, есть проблемы с плавностью, вам стоит попробовать добавить слой-наложение к видео, что поможет замаскировать его качество. Это легко делается путем добавления абсолютно спозиционированного div сразу после видео или с использованием псевдо-элемента ::after в контейнере видео.
Вам надо применить к этому элементу свойство CSS pointer-events: none; , чтобы он не препятствовал управлению проигрыванием видео.
Полупрозрачное наложение ровного цвета может выглядеть неплохо, особенно если настроить наложение цвета в соответствии с цветами остальной части вашего дизайна. Наложение с паттерном может выглядеть еще лучше, но его сложнее сочетать с дизайном.
Чтобы увидеть наложение в действии, проверьте это демо с паттернами-наложениями и видео низкого качества.
Ограничивайте общий размер и длину видео Низкий битрейт помогает обеспечить плавность воспроизведения видео без пауз для буферизации, но нельзя забывать о том, что пользователи приходят на сайт не для того, чтобы смотреть фоновое видео. Не стоит рассчитывать на то, что они будут рады скачать 20 мегабайт двухминутного видео.
Всегда ограничивайте длину вашего видео в рамках 30–40 секунд, а лучше еще более короткий момент, бесшовно закольцованный и выглядящий как длинное видео, но размером не больше 1–2 мегабайт. Немного рекламы: вы можете найти несколько неплохих закольцованных видео на BG Stock, этот видеосток я создал специально для использования видео в качестве фона на сайтах (впрочем, хватает и других видеостоков).
Избегайте чрезмерного движения Ключевое слово в сочетании “фоновое видео” — “фоновое”. Видео играет вспомогательную роль по отношению к контенту сайта и мы должны обеспечить, чтобы оно не перетягивало внимание на себя. Фоновые видео должны быть ненавязчивыми и плавными, чтобы не отвлекать пользователей от того, для чего они пришли на сайт. А, значит, надо избегать быстрого или чрезмерного панорамирования, трясущейся/нестабилизированной съемки и внезапного обрыва видео.
Обеспечьте достаточный контраст для текста на переднем плане Если на фоне видео есть текст, важно, чтобы он был читаемым. Если цвет текста сталкивается с видео, надо добавить наложение, чтобы выделить текст или же добавить тексту тень или фоновый цвет.
Этому также поможет отсутствие резких цветовых контрастов в вашем видео. Например, очень трудно разместить текст без потери читаемости на фоне подобного видео (см. изображение ниже) по причине чередования в нем темных и светлых участков, пересечение с одним из которых повлечет низкую контрастность.
Обеспечьте заполнение фоном всего контейнера В CSS3 есть отличное и широко известное свойство background-size и одно из его возможных значений cover позволяет фоновому изображению занимать столько пространства, чтобы закрывать весь элемент, ни больше и ни меньше, сохраняя при этом оригинальное соотношение сторон.
И есть менее известное свойство object-fit , позволяющее проделывать тот же трюк с элементами DOM, что является отличным способом обеспечить заполнение нашим видео контейнера. К сожалению, поддержка в браузерах этого свойства пока недостаточна (привет, IE!), поэтому приходиться использовать полифилл или JavaScript для достижения такого поведения.
Самый простой вариант: jQuery плагин jQuery Background Video (написанный автором этой статьи — Энгусом Расселом), который берет все эти заботы на себя, а также делает несколько других полезных вещей. Это не единственный плагин jQuery для фонового видео.
Адаптируйте для разных устройств На данный момент поддержка фонового видео на мобильных устройствах не слишком хороша. iOS отключает автовоспроизведение видео, помещая на видео большую иконку воспроизведения, после нажатия на которую и запускается видео.
Если бы мы помещали обычное видео на нашу страницу, то такое поведение было бы прекрасным, но так как наше видео это лишь элемент дизайна, то нам нужен запасной вариант в виде фонового изображения. А так как у Android устройств также есть проблемы с воспроизведением, в обоих случаях лучше отключить видео и использовать фоновое изображение.
Как вы это сделаете зависит от вас — вы можете спрятать видео на маленьких экранах с помощью медиа-запроса или удалив видео для всех устройств iOS/Android, после проверки пользовательского агента с JavaScript. Плагин jQuery Background Video делает это по умолчанию.
Не зацикливайте видео навсегда Если вы добавите атрибут loop к тегу video , ваш браузер будет его воспроизводить вплоть до закрытия вкладки. Это потребляет ресурсы процессора и может замедлить производительность остальной части страницы.
Вы можете удалить этот атрибут и воспроизвести видео один раз, но в большинстве случаев у нас короткое зацикленное видео и этот способ нам не подходит. Проще написать код JavaScript, останавливающий воспроизведение через определенное время и сбрасывающий таймер, если видео остановлено или запущено вручную (в большинстве браузеров для этого достаточно клика правой клавишей мыши).
Вышеупомянутый плагин jQuery Background Video позволяет настроить остановку воспроизведения видео через указанное время.
Добавьте кнопку паузы Независимо от степени вашего восхищения фоновым видео, обязательно найдутся люди, которым захочется поставить его на паузу. Оно может не понравится им, может создать впечатление замедления работы компьютера, а может они просто не рассчитывают на то, что оно остановится само.
Мы можем легко добавить кнопку паузы с помощью JavaScript — а в jQuery Background Video эта кнопка добавляется по умолчанию и вам надо лишь определиться с ее размещением и стилями.
Предусмотрите затухание И еще раз: наше фоновое видео должно быть ненавязчивым. Внезапные движения при начале его воспроизведения могут отвлечь пользователя, поэтому в большинстве случаев будет хорошей идеей при запуске видео создать эффект затухания.
Мы можем сделать это, добавив изображение в качестве фона для элемента, содержащего и задав видео прозрачность 0 по умолчанию (1 при начале воспроизведения), а также добавив CSS-переход свойства прозрачности. Это тоже есть в плагине jQuery Background Video.
Также имеет смысл добавлять затухание при паузе видео, особенно если замещающее изображение более высокого качества, чем видео.
.</p><h3>Могу ли я использовать контент Storyblocks Video в программах Movavi?</h3><p>Да. Библиотека участника содержит более 830 000 видеоклипов и анимированных фонов, а также стоковых HD-видео, которые вы можете использовать в программах Movavi.</p><h3>Нужно ли мне платить отчисления автору клипа, который я скачал(а) с Storyblocks Video и использую в своем проекте?</h3><p>Нет. Все содержимое Storyblocks Video – это безгонорарное видео, доступное в рамках лицензии Royalty Free. Это значит, что вы не обязаны совершать никаких дополнительных платежей помимо покупки подписки на сервис.</p><h3>Могу ли я использовать контент Storyblocks Video в коммерческих целях?</h3><p>Да. Согласно политике Storyblocks Video, видеоклипы могут быть использованы для создания любых материалов: рекламных роликов, фильмов, эпизодов для видеоигр, обучающих материалов и др.</p><h2>Видео в качестве фона для сайта на HTML5+CSS</h2><p style=)
