Полное руководство по использованию видео с Divi

Видео - мощный инструмент. Если изображение стоит тысячи слов, то минута видео стоит 1,8 миллиона слов (по крайней мере, так предлагает исследователь доктор Джеймс Маккуиви). Видео - это эффективный маркетинговый инструмент и, если все сделано правильно, инструмент красивого дизайна.

С Divi легко добавить видео на свой сайт. Модули слайдера видео и видео позволяют добавлять видео, размещенные на сторонних серверах, например youtube и vimeo, просто вводя URL-адрес видео. Вы даже можете добавлять свои собственные видео в форматах mp4 и webm для максимальной совместимости с браузером. В довершение всего, Divi дает вам возможность стилизовать ваши видео с помощью наложений изображений и кнопок воспроизведения, чтобы они соответствовали дизайну вашего сайта.

Помимо встраивания видео на вашу страницу, Divi также предоставляет простое решение для добавления фоновых видео. В настоящее время, когда вы создаете сайт с помощью конструктора Divi, каждый раздел, строка, столбец и 20 из 37 модулей имеют возможность фонового видео.

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

В этом руководстве мы собираемся обсудить…

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

Давайте начнем.

Изучение видеомодуля

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

Добавление собственного видео в видеомодуль

Чтобы добавить собственное видео с видеомодулем, вы должны загрузить видео или добавить URL-адрес видеофайла в настройках видео. И вы должны добавить свое видео в двух форматах файлов.

И это все, что вам действительно нужно сделать. Достаточно просто.

Однако за кулисами Divi использует видеоэлемент HTML5 для отображения видео. Когда вы решаете добавить собственное видео или загрузить собственное видео с использованием форматов mp4 и webm, структура кода, развертываемого Divi, выглядит примерно так:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

Вот несколько вещей, которые я хочу отметить в отношении того, что делает этот код:

1. Обратите внимание на атрибут управления в теге <video>. Это сообщает видео, что нужно отображать элементы управления. Достаточно просто.
2. Обратите внимание на два тега <source> в открывающем и закрывающем тегах <video>. Источники состоят из видеофайлов. Первый - это mp4, а второй - формат файла webm. Оба необходимы для максимальной поддержки браузером. Порядок тоже важен. Вы хотите, чтобы браузер первым увидел mp4, поскольку он наиболее универсально поддерживается. Я подробнее расскажу об этих форматах позже.
3. Строка с надписью «Ошибка при загрузке этого ресурса» будет отображаться, если первые два формата не распознаются.
4. Чего вы не видите, так это того, что Divi стилизовал этот тег <video> и присвоил ему ширину 100%, чтобы сделать его адаптивным, поэтому ваше видео будет адаптироваться к ширине столбца, в котором оно находится.

Этот элемент видео HTML5 становится все более популярным в качестве нового стандартного способа показа видео в Интернете. К счастью, Divi позаботится об этом за нас.

Накладываемое на собственное видео изображение

Помимо возможности добавления ваших видео в видеомодуль, Divi также позволяет вам добавлять пользовательское оверлейное изображение для вашего видео.

Если вы решили добавить оверлейное изображение к собственному видео, вы должны загрузить свое собственное. Возможность создания изображения из видео применима только к URL-адресам сторонних видео, таких как Youtube и Vimeo.

Поскольку изображение станет размером с видео, а видео будет адаптироваться к размеру столбца, в котором оно находится, важно выбрать изображение правильного размера. Видео с Youtube, Vimeo и большинства других форматов обычно имеют соотношение сторон 16: 9. Поэтому, если для максимальной ширины контента установлено значение Divi по умолчанию 1080 пикселей, то при соотношении сторон 16: 9 ваше видео будет иметь размеры 1080 × 608. Поэтому ваше оверлейное изображение должно быть 1080 × 608 пикселей.

Кнопка воспроизведения

Как только ваше изображение будет установлено, Divi автоматически применит настраиваемую кнопку воспроизведения. Вы даже можете изменить цвет кнопки, если хотите, в настройках видео на вкладке «Дизайн».

Как только пользователь нажимает на наложение с помощью настраиваемой кнопки воспроизведения, наложение и кнопка исчезнут, и видео под наложением начнет воспроизводиться автоматически.

Добавление URL-адреса размещенного на стороннем видео

Самый распространенный метод добавления видео в модуль видео - это просто добавить URL-адрес видео, размещенного на стороннем сервере, например Youtube или Vimeo. Таким образом, вместо добавления двух видеоформатов, как для самостоятельного размещения видео, вы просто добавляете URL-адрес в верхнюю фоновую панель ввода.

За кулисами Divi добавляет div-обертку с гибкой шириной и встраивает iframe, отображающий видео. Этот iframe такой же, как и непосредственно на YouTube. Вот пример того, как выглядит код при добавлении видео на YouTube с видеомодулем:

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

Div с классом «fluid-width-video-wrapper» оборачивается вокруг iframe и дает ему ширину 100%, так что он подстраивается под ширину своего контейнера, делая его отзывчивым.

Если вы решите добавить наложенное изображение, вы можете загрузить свое собственное или, чтобы сэкономить небольшую головную боль, вы можете просто щелкнуть «создать из видео», и Divi автоматически применит наложенное изображение, взятое из видео. Вы также можете настроить кнопку воспроизведения.

Изучение модуля слайдера видео

Слайдер видео работает очень похоже на модуль видео в том, как видео размещаются на веб-странице, за исключением того, что теперь видео находятся в слайдере. Это удобный способ отображать видео в одном месте, чтобы ваши пользователи могли просто прокручивать группу видео по одному. Для получения дополнительной информации о параметрах модуля Video Slider вы можете посетить страницу документации.

Один из моих любимых элементов слайдера видео - это дорожка миниатюр, которую вы можете использовать для управления слайдами. Это одновременно и удобно, и увлекательно.

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

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

Эскизы соответствуют соотношению сторон 4: 3, поэтому для настройки изображений слайдера 16: 9 он будет взорваться и обрезать правую и левую часть изображения, чтобы покрыть все пространство.

Совет по дизайну : один трюк, который вы можете сделать, чтобы уменьшить размер файла и предотвратить обрезку части изображения миниатюрами, - это настроить миниатюры до 253 × 190 пикселей (соотношение сторон 4: 3) и выбрать параметр, чтобы скрыть отображать наложения изображений на основное видео. Таким образом, ваши оверлейные изображения будут использоваться только для эскизов, и поэтому их не нужно будет больше, чтобы настроить размер основного видео.

4 важных совета по самостоятельному размещению видео

1. Используйте CDN. Если вы думаете о добавлении видео через медиатеку WordPress, подумайте еще раз. Хотя вы можете размещать видео на вашей собственной установке WordPress на вашем собственном сервере, вы, вероятно, столкнетесь с некоторыми ограничениями по пропускной способности, размеру файла, пространству для хранения и т. Д., Что может снизить время загрузки вашего сайта и привести к задержке потоковой передачи видео. . Я бы рассмотрел возможность размещения ваших видео на внешнем сервисе, таком как Amazons3. Это поможет сократить время загрузки страницы. Кроме того, некоторые из этих провайдеров предлагают определенный уровень безопасности, чтобы люди не могли загружать ваши видео (или, по крайней мере, затрудняли загрузку).
2. Оптимизировать файл для Интернета. Видео занимают большую часть полосы пропускания, особенно когда вы используете большой видео фон. Вам нужно будет быть осторожным, чтобы не перегружать вашу страницу. Есть ряд факторов, которые следует учитывать, если вы хотите должным образом оптимизировать свое видео для Интернета. Вот полезное уравнение для рассмотрения:
   размер файла = битрейт (килобит в секунду) x продолжительность (длина видео в секундах)

   Итак, если вы хотите получить файл меньшего размера, вам нужно будет сократить продолжительность (длину видео) и / или битрейт (количество передаваемых килобит в секунду). Битрейт всегда должен быть ниже скорости соединения пользователя. Учитывая, что скорость интернета во всем мире составляет около 7 Мбит / с (в США - около 18 Мбит / с), вы захотите сохранить битрейт намного ниже этого, чтобы избежать прерывания потоковой передачи.

   Необязательно делать все в одиночку. Есть несколько отличных бесплатных инструментов, которые помогут вам со сжатием видео, например Handbrake.

   Я предлагаю прочитать «5 лучших способов уменьшить размер видео для более быстрой загрузки», если вы хотите узнать больше об оптимизации ваших видео для Интернета. Здесь перечислены несколько отличных ресурсов и отличное объяснение того, как использовать Handbrake.

3. Добавьте правильные форматы файлов.
   Как я упоминал ранее, если вы самостоятельно размещаете свои видео (не полагаясь на стороннюю организацию, которая разместит их для вас, например Youtube), вам нужно будет добавить свое видео в форматах mp4 и webm.

   Mp4 в настоящее время является наиболее широко поддерживаемым форматом, поскольку он по-прежнему воспроизводит некоторые старые браузеры с использованием флэш-памяти и является стандартом для поддержки мобильных браузеров. Divi перечисляет mp4 первым в коде, поэтому устройства iOS могут сразу распознать файл.

   Webm - второй по популярности формат. Он был создан для Интернета и, похоже, останется здесь надолго. Он обеспечивает высокое качество потоковой передачи с отличным сжатием. И это с открытым исходным кодом.

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

   Отличным бесплатным инструментом конвертации будет медиаплеер VLC.

4. Определите типы MIME: для того, чтобы видеоформат WEBM работал во всех браузерах, на вашем сервере должны быть указаны правильные типы MIME. Вы можете узнать больше об использовании .htaccess для определения типов MIME здесь. Если вы заметили, что ваши видео не воспроизводятся в определенных браузерах, то, скорее всего, причина в этом. Чтобы добавить типы MIME в файл .htaccess, используйте FTP-клиент (например, FileZilla) для доступа к корневым файлам WordPress. Там вы должны найти ваш файл .htaccess. Откройте файл в текстовом редакторе. Под строкой «#END WordPress» добавьте следующее:

   Добавить тип видео / mp4 .mp4 .m4v
   Добавить тип видео / ogg .ogv
   AddType video / webm .webm

   

   Затем сохраните файл. Теперь ваши видеоформаты будут распознаваться во всех браузерах.

Хостинг на сторонних платформах (Youtube и Vimeo)

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

Если вы ничего не знаете о видео, я предлагаю выбрать этот маршрут. Если вы не без ума от ограничений YouTube или vimeo free, вы можете укусить пулю для Vimeo Pro. В конечном итоге это может стоить головной боли. Чего вы не хотите, так это размещать на своем сайте видео, которое замедляет его работу или выглядит плохо. Это просто того не стоит.

Сторонние видео платформы, поддерживаемые модулями видео и видео слайдеров

Если вы хотите использовать модули видео и видео слайдера для добавления сторонних видеороликов, вы можете использовать следующие популярные платформы:

• YouTube
• Vimeo
• Dailymotion

Как добавить сторонние видео с помощью Divi

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

Затем вы можете вставить это в модуль видео или видео слайдер.

Нажмите кнопку «Создать из видео», чтобы добавить наложение изображения. Или загрузите свой собственный.

Сохранить настройки. Вот и все.

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

Возможно, вам потребуется настроить ширину и высоту вашего встраивания, чтобы настроить адаптивный макет.

А как насчет Вистии?

Wistia - мощная платформа, которую используют многие люди, но, к сожалению, в настоящее время она плохо работает с модулями Divi. Однако вы можете встроить Wistia, используя предоставленный ими код для встраивания.

Вставив этот код в раздел содержимого на вашем сайте Divi, вы увидите видео.

Вы даже можете вставить код в раздел содержимого модуля слайдера, чтобы добавить видео wistia в качестве одного из слайдов. Однако вам нужно будет настроить некоторый CSS, чтобы он выглядел так, как вы хотите.

Использование видео фонов с Divi

Стоит ли даже использовать фоновое видео?

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

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

Возможности фонового видео в Divi

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

• Заголовок полной ширины (работает также в полноэкранном режиме)
• Полноэкранное меню
• Полный портфель
• Полноразмерный слайдер публикации (если не используется изображение, вы можете использовать фоновое видео в качестве фона для всех слайдов)
• Заголовок сообщения в полную ширину
• Ползунок полной ширины (работает с отдельными слайдами)
• Аудио модуль
• Барные стойки
• Модуль Blurb - просто не забудьте добавить к модулю отступ.
• Модуль призыва к действию
• Таймер обратного отсчета
• Электронная почта Optin
• Фильтруемый портфель
• Модуль входа в систему
• Модуль счетчика чисел
• Персональный модуль
• Настройки портфолио
• Слайдер публикации (если изображение не используется, вы можете использовать фоновое видео в качестве фона для всех слайдов)
• Заголовок поста
• Таблица цен (Вы можете установить видео фон для модуля и для разных таблиц индивидуально)
• Слайдер (только для фона отдельных слайдов)
• Вкладки (как для фона модуля, так и для отдельных вкладок)
• Отзыв
• Текст
• Переключать

Библиотеки стоковых видео

Самая сложная часть добавления видеофона на ваш сайт - это найти правильное изображение и убедиться, что оно правильного размера. К счастью, вам не нужно создавать собственные фоны для видео. Существуют бесплатные библиотеки стоковых видео, которые могут хорошо подойти для вашего веб-сайта. Если вы ищете бесплатные видеоматериалы, лучше всего начать с videvo, coverr или videezy. Если вы ищете платные версии более высокого качества, вы можете проверить videohive, видеоблоки или pond5. Некоторые из этих сайтов очень хорошо используют видео-фоны, если вы ищете вдохновения.

Как добавить фоновое видео на свою страницу

После того, как вы найдете (или создадите) подходящее видео, все станет очень просто. Чтобы добавить видео-фон на свою веб-страницу Divi, просто разверните визуальный конструктор и найдите раздел, в который вы хотите добавить видео, и щелкните значок «Параметры раздела».

На вкладке содержимого щелкните значок / вкладку фонового изображения в параметрах фона. Если у вас размещается собственное видео, введите форматы mp4 и webm. Затем введите размеры видео, чтобы Divi знала, как правильно его изменить.

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

Затем сохраните настройки. Это так просто.

Если вы планировали использовать одно из своих видео, которое теперь размещаете на YouTube (или vimeo), в качестве фона, в настоящее время это невозможно в конструкторе Divi. Помните, что вам нужны эти видео в правильных форматах, чтобы их можно было показывать во всех браузерах. Однако вы можете загрузить это видео с Youtube (если оно принадлежит вам) и преобразовать его в форматы mp4 и webm для использования в фоновом режиме.

Совет по дизайну фона: использование видео-фона для полноразмерного слайдера публикации

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

Перейдите на свою страницу с помощью Visual Builder и добавьте в верхнюю часть страницы полноразмерный раздел с полноразмерным модулем пост-слайдера.

На вкладке «Контент» в разделе «Показать избранное изображение» выберите «НЕТ».

Затем в разделе «Фон» выберите вкладку «Фон видео» и добавьте оба формата видео вместе с размерами.

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

Вот и все.

Теперь пользователь может прокручивать слайдер избранного поста с помощью классного фонового видео. Просто убедитесь, что фон видео достаточно тонкий, чтобы не отвлекать от контента.

Рекомендации по использованию фонового изображения для видео

Учитывая все возможности, которые предоставляет видео-фон, я подумал, что лучше всего включить некоторые общие передовые практики.

1. Всегда добавляйте фоновое изображение в качестве альтернативы для мобильных устройств. Мобильные устройства не будут автоматически воспроизводить большие видео. Вот почему Divi по умолчанию показывает резервное изображение на мобильных устройствах.
2. Используйте небольшое видео. Для фоновых видео вы можете обойтись разрешением 720p, поскольку фон - это вторая мысль о контенте / тексте, наложенном на видео. Качество не пострадает так сильно, как вы заметите.
3. Рассмотрим наложение. Добавление полупрозрачного цветного наложения поверх видео поможет вам получить файл меньшего размера, потому что он скроет беспорядочные детали видео с меньшим качеством. Кроме того, это сделает ваш текст более заметным.
4. Не используйте аудио. Вам не нужен звук для видео-фона, так что уберите его. Это сократит размер файла.
5. Для кросс-браузерной поддержки используйте форматы mp4 и webm.

Приостановить видео?

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

В некоторых случаях видео может конфликтовать со звуком фонового воспроизведения другого видео. Эта опция помогает поддерживать одновременное воспроизведение только одного звука видео.

Divi Video Hacks

Есть еще несколько дополнительных настроек видео и видео фона, которые могут оказаться полезными. Вот несколько.

Измените размер кнопки воспроизведения

Если вы хотите изменить размер кнопки воспроизведения, перейдите в настройки видеомодуля на вкладке «Дополнительно» и введите следующий настраиваемый CSS-код в поле «Значок видео»:

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

Вы можете отрегулировать значения до желаемого размера. Просто убедитесь, что font-size и line-height всегда остаются неизменными, а margin-top и margin-bottom всегда остаются отрицательными значениями, равными половине размера шрифта. Например, если вы хотите сделать его меньше, значения будут.

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

Как остановить остановку фонового изображения при нажатии

В некоторых случаях вы можете обнаружить, что щелчок по фоновому видео приостанавливает воспроизведение видео. Вы можете отключить эту функцию, добавив следующий настраиваемый CSS в файл style.css в дочерней теме (или в настройщике темы> Дополнительный CSS):

.et_pb_section_video_bg video {
pointer-events: none;
}

Как остановить зацикливание фона видео

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

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Размеры видео для Divi

Я не хотел заканчивать пост без упоминания размеров видео. Нет четкого правила относительно того, какие размеры использовать, поскольку все видео и веб-сайты разные. Видео с разрешением 720p (1280x720) может отлично выглядеть растянутым на экране с разрешением 1920 x 1080, в то время как другое будет выглядеть ужасно. Принимая решение о размерах или разрешении видео для вашего сайта, вы можете руководствоваться размерами изображения для макетов столбцов и модулей Divi в качестве общих рекомендаций. Проще говоря, ваше видео должно быть максимально близко к ширине столбца, в котором оно находится, но не углубляться. Поэтому, если у вас есть столбец с полной шириной экрана с максимальной шириной 1080 пикселей, вам не понадобится видео с разрешением выше 720p (1280 × 720). Однако, если вы используете фоновое видео, охватывающее всю ширину вашего браузера, вам может потребоваться разрешение до 1080p (1920 × 1080), чтобы, когда он занимал всю ширину браузера на больших мониторах, он не отображался. выглядят зернистыми.

Если вы собираетесь полагаться на стороннего видеопрофессионала для подготовки ваших видео для Интернета, вот список рекомендуемых разрешений видео для YouTube.

2160p: 3840 × 2160
1440p: 2560 × 1440
1080p: 1920 × 1080
720p: 1280 × 720
480p: 854 × 480
360p: 640 × 360
240p: 426 × 240

Они соответствуют соотношению сторон 16: 9, поэтому вы не увидите черные полосы по бокам видео.

Vimeo также дает рекомендации для видео. Мне особенно нравится публикация Vimeo об основах сжатия видео.

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.