И так, что же такое background web video?
Смело можно утверждать, что это еще один способ выделить свой web сайт среди множества других в наш информационный век. Конечно, такое видео не гарантирует, что каждый из посетителей Вашего web сайта останется на нем и сделает покупку или пройдет процесс регистрации, но, как и изящный дизайн или эффектное изображение – background web video сделает свой вклад в представление Вашего сайта. Другими словами background video – это не просто элемент дизайна или декоративная вещица Вашего сайта, но и отличный маркер для Ваших пользователей. Как известно, любая анимация привлекает человека больше, чем самое яркое изображение, а если эта анимация непосредственно связана с Вашим сервисом или продуктом, то это отличный маркетинговый ход!
Используя тег video, Вы можете легко интегрировать анимированное видео на Вашем web сайте, но, как известно, тег video поддерживает несколько видео форматов. А какой формат выбрать? Хороший вопрос, не так ли? Как правило, background web video не содержит звука, поэтому мы не будем уделять внимание этому вопросу. Давайте поговорим о видео форматах. Тег video может использовать один видео файл, который указывается через атрибут src, или же несколько с помощью вложенного тега source. Но, так или иначе, в сети есть три распространенных видео форматов, которые Вы можете использовать:
• OGG Theora – бесплатный и открытый формат видеокомпрессии;
• H.264 (MPEG-4) – самый популярный и распространенный формат;
• WebM – открытый, фрмат без авторских прав, созданный специально для веб.
Несмотря на то, что каждый из этих форматов поддерживается тегом video, не все браузеры будут воспроизводить их. Мы советуем использовать несколько форматов совместно. Например, почти все браузеры поддерживают работу с MPEG-4, в то время как webm формат будет поддерживаться только в Chrome, FireFox, Opera и частично в Android Browser. Это же касается и OGG Theora. Ответить однозначно, с чем это связано мы не можем, и поэтому не будем запутывать Вас своими догадками. Но, исходя из такой ситуации – лучшим вариантом будет использовать несколько форматов.
Совет: Если Вы точно знаете какими браузерами пользуются Ваши клиенты, то Вы можете сократить этот список до двух или даже до одного формата, но как бы то ни было, мы настоятельно рекомендуем использовать MPEG-4 из-за его популярности.
В общем случае тег video для animated background video может выглядеть так:
<video autoplay="autoplay" poster="bg-image.jpg">
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
<video>
Александр Паровой
Как Вы можете убедиться – все очень просто. Смело добавляйте видео или анимированную инфографику на свой сайт, А главное помните:
• Используя видео в качестве фона, не забывайте применять зацикливание;
• Старайтесь не делать видео затянутым – чем длиннее видеоряд, тем больше размер видео файла;
• Старайтесь делать видео простым. Плохое качество видео может отпугнуть клиентов, поэтому лучше сделать его анимированным и простым.
• Используйте тематическое видео. Например, это может быть простая реклама Вашего сервиса или продукта.