В премиум плагине «Живая Форма + Слайдер» для шаблона AB-Inspiration 4.0 есть совершенно уникальная возможность поставить фон в виде видео. Это новая технология HTML5 набирает популярность среди владельцев сайтов и блогов.
Например, среди известных сайтов эту технологию использует Vimeo.com, PayPal.com. Видеофон действительно смотрится очень эффектно и впечатляет посетителей.
И сегодня эта технология доступна пользователям шаблона AB-Inspiration. Если Вы установили плагин WPForm — Живая Форма, Вы можете задать фон блока с формой подписки под шапкой в виде видео.
Вот небольшой пример как видеофон выглядит на блоге:
В этой статье я хочу подробнее описать, как пользоваться этой возможностью правильно!
Поскольку технология новая, она соответственно требует определенных правил использования.
Каким должно быть видео для видеофона
- Видео должно быть легким, желательно не более 2мб
- Видео должно быть коротким. Видео в фоне будет зацикленным. Это значит, что оно будет повторятся по кругу.
- Видео будет без звука. Это тоже важный момент видеофона. Хотя Вы можете загружать видео со звуком, но на блоге звук будет отключен.
- Видеофон должен быть в 2-х форматах — .MP4 и .WebM
Итак, давайте рассмотрим поподробнее, как все это реализовать.
Где брать видео для фона
1. Создать самостоятельно.
Видеокамера или фотокамера, фантазия, творчество и все получится :). Это может быть нарезка из разных видео, или timelapse или скажем небольшой видеосюжет.
2. Бесплатные профессиональные видеофоны
Сейчас практически все фотостоки предлагают видеофоны. Можно даже найти бесплатные. Вот несколько примеров бесплатных видео стоков.
- freevideobacks (http://freevideobacks.com/) — переключиться во вкладку Free, нужна регистрация
- Storyblocks (https://www.storyblocks.com/video) — регистраций, 7 дней бесплатных скачиваний.
Можно еще поискать в Google по запросу «Video Background Free»
3. Купить профессиональный видеофон.
Как правило, такие видео создают профессионалы, на определенные темы. Цена таких фоновых видео от 1$ до 70-100$.
- depositphotos (http://ru.depositphotos.com/stock-videos.html) — от 10$, на русском, нужна регистрация, качественные видео
- shutterstock (http://www.shutterstock.com/video/?language=ru) — регистрация, дорогие, качественные видео
- Pond5 (http://www.pond5.com/) — поиск по рубрикам, сортировка по ценам, от 5$
Как сжать видео
Есть специальные программы для сжатия видео.
Я пользуюсь программой Miro Video Converter (http://www.mirovideoconverter.com/). Это маленькая программка и для Мак и для Windows.
- Скачиваете программу на компьютер и устанавливаете ее.
- Далее открываете в программе видео, которое хотите сжать
- Выбираете в какой формат конвертировать
- Нажмите «Convert to MP4/WebM HD» — формат будет в зависимости от выбора
Видео, которое выше, я записала с экрана с помощью программы Camtasia. После сохранения это 1-минутное в формате mp4 весило 250мб. После сжатия в программе Miro Video Converter видео весит 20 мб. При этом качество осталось прежним.
Как конвертировать видео в .mp4 и .webm форматы
Я использую туже программу, что и для сжатия видео — Miro Video Converter. Собственно это программа для этого и создана , чтобы сжимать и конвертировать видео в соответствующие форматы для видеофона.
После того как Вы сжали и конвертировали видео у Вас должно получиться 2 видео в формате .MP4 и в формате .WebM
Небольшое видео как конвертировать видео в mp4 и webm форматы с помощью программы Miro Video Converter
Как установить видеофон в «Живую Форму»
- Зайдите в админку блога
- Перейдите настройки формы (Форма)
- Переходим во вкладку «Фон Блока»
- Отмечаем опцию «Видеофон»
- Загружаем сначала видео в поле «Ссылка на видео в .mp4 формате»
- Загружаем второе видео в поле «Ссылка на видео в .webm формате»
- Загрузите изображение, которое будет отображаться до тех пор, пока не загрузиться видео
- Сохранить изменения
Ну что ж, как видите правила не сложные, но важные.
Если остались вопросы, буду рада ответить в комментариях. А также не забудьте поделиться статьей с друзьями в социальных сетях. Если они также блогеры, как и Вы, уверена, эта информация будет им полезна.
Создать сайт для заработка с нами — легко и быстро!
За помощью обращайтесь в нашу службу поддержки 24/7
Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
а также, хостинг Beget:
Средняя оценка: 5 из 5
Спасибо, Анфиса. Как всегда, очень полезная фишка. Да и мало кто об этом знает. Покнопила. Пусть друзья узнают. Успехов Вам и Вашим читате лям.
Благодарю за подсказку, програмку скачала-установила
Анфиса, а она только на короткие видео подходит? и сжимать файлы так же как и конвертировать (как ты в ролике показала) или что-то еще нужно там в настройках отмечать?
А то я тут решила 30-ти минутное видео сжать но что-то оно уже пол дня сжимается и только на 31%
Татьяна, видимо видео очень большое. Ничего дополнительного делать не нужно. Вообще эта программка для конвертации коротких видео для вставки в сайты по технологии html5. Сжимает автоматически (как дополнительная опция). Если Вам нужно просто сжать видео, Вы можете попробовать загрузить его на Youtube. А потом скачать. Youtube очень хорошо сжимает видео. Я сама часто этим пользуюсь.
Анфиса, а разве при загрузке видео на Youtube качество не страдает при сжатии ?
Кстати мой файл в 1,6 гб сжался в програмке до 387 мб
Качество «на глаз» вроде тоже осталось. Сын в свойствах посмотрел, сказал,что параметры, отвечающие за качество не поменялись. А уменьшенные «скорость передачи данных» и «общая скорость потока» на это не влияют.
Татьяна, на YouTube нужно немного подождать (сутки, двое). Потом YouTube предлагает варианты качества. Выбираете HD и скачиваете. Оно будет меньше, чем оригинал, но такого же хорошего качества.
Не поняла последнюю фразу.
Вот скрин оригинала моего видео http://i.imgur.com/xcJUFBa.png а вот после сжатия http://i.imgur.com/Djvo7OJ.png эти параметры уже уменьшились.
Насколько мне сказали, на качество видео влияет: Частота, Высота и Ширина кадров- а они не изменились.
Дополнительных настрое по скорости передачи данных в программке нет. Может Ваш сын знает альтернативу для сжатия?
Спасибо Анфиса за ваши творческие результаты работы!
Вопрос по сжатию. Если видео весит 200 или даже 20Мб, это ведь не решает проблему вашей первой рекомендации — «желательно не более 2Мб». Какой максимально допустимый размер все-таки рекомендуете?
И еще одно пожелание по этому плагину я отправил в скайп-поддержку. Посмотрите пожалуйста. Если есть смысл, может учтете в обновлении. Это касается ширины блога — на 1000px и ширины живой формы — максимум 966px.
Виталий, это просто пример как сильно уменьшается видео. Рекомендация остается прежней — желательно не более 2МБ. Но может быть и больше. Чем меньше, тем лучше!
По поводу размера, хорошая идея. Можно добавить просто на выбор 966px, 1000px или 100%. В следующем обновлении учтем.
Только что протестировала видео в програмке, которой пользуюсь уже много лет, FormatFactory!
Простая, бесплатная, на многих языках. Я ее использую для переформатирования видео в другие форматы (в том числе и мобильные). И там не только видео, но и аудио и т.д
А сейчас свой видео файл в формате mp.4 попробовала переформатировать в mp.4 высшего качества и оно автоматически сжалось на 50% ,без потери качества А главное, файл в 1,6 гб сжался за … 23 минуты!
Как раз сейчас переписывалась со знакомым, который занимается съемкой видео профессионально. Он посоветовал для сжатия еще вот эту простую и бесплатную программу http://www.freemake.com/ru/free_video_converter
А что по поводу «скорость передачи данных» и «общая скорость потока»?
Анфиса, отчитываюсь! Только что скачала и установила freemake_video_converter (кстати она тоже конвертирует в HTML5)
И снова тот же файл сжимала (1,6 гб) сжатие прошло за 30 минут и на 65% (так что эта програмка лучше по сжатию чем FormatFactory).
Проанализировав в Свойствах «скорость передачи данных» и «общая скорость потока» поняла что они уменьшаются на столько же процентов, на сколько и происходит сжатие видео. За что они отвечают в видео пока выясняю. Как только узнаю, отпишусь
Анфиса, спасибо за пояснания про видеофон, это с
«Следцющий этап мойе дессертации», очень хочу попробовать! Спасибо также за комментарии, очень полезено.
Сколько всего нового, просто не успеваю за всеми! Но за то знаю над чем работать!
Анфиса, спасибо за информацию!
Анфиса, спасибо большое за плагин! Ещё остались вопросы по нему! Подскажи, а можно ли вместо видео установить просто слайды, например на первом подписка, на других реклама продуктов, и сделать их не просто на ширину блога, а на всю ширину экрана? Есть ли такие функции в плагине?
Спасибо большое, Анфиса!
Не перестаете удивлять меня своими новшествами!!!
плагин WPForm.ru «Живая Форма» очень поможет всем интернет-предпринимателям.