Multipurpose Website Templates. Как работать с видео

Из этого туториала Вы узнаете, как работать с видео в Многоцелевых шаблонах сайтов.

Многоцелевые шаблоны сайтов используют RD Background Video для добавления фонового видео страницы. Вы можете с лёгкостью изменить или добавить видео фон или полноширинное видео на страницы сайта. Давайте узнаем подробнее, как работать с видео.

Для того чтобы изменить фоновое видео, следуйте таким инструкциям:

1. Подключитесь к вашему серверу, используя FTP или Панель управления хостингом.

2. Во-первых, загрузите ваши видео-файлы на сервер. Создайте новую папку или просто загрузите видео файлы в папку video на вашем сервере.

   Обратите внимание! Вам нужно подготовить 5 версий видео в формате .mp4 с различными расширениями для правильной работы скрипта. Более того, подготовьте 5 версий изображения в формате .jpg для отображения изображения на мобильных устройствах или компьютерах с низкой скоростью интернета.

   Названия ваших файлов должны быть следующие:

   • video-(suffix).mp4

   • video-image-(suffix).jpg

   Где suffix используется для разных расширений:

   • xs — для Очень маленьких устройств, смартфоны (380x240px);

   • sm — для Маленьких устройств, планшеты (640x360px);

   • md — для Средних устройств, дисплеи (854x480px);

   • lg — для Больших устройств, экраны (1280x720px);

   • xlg — для Очень больших устройств, широкие экраны (1920x1080px);

   В этом случае, видео и названия изображений будут следующие:

   • video-(sm).mp4

   • video-image-(lg).jpg

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

3. Для того чтобы изменить фоновое видео в существующем разделе разметки HTML, измените путь видео в атрибуте data-rd-video-path.

   <div class="rd-video" data-rd-video-path="video/bg-video-2/bg-video-2" data-rd-video-image-xs="16" data-rd-video-image-sm="16" data-rd-video-image-md="22" data-rd-video-image-lg="41" data-rd-video-image-xlg="41" data-rd-video-autoplay="true" data-rd-video-preload="metadata">

   Где video/bg-video-2/bg-video-2 — это ссылка на ваше видео. Где video/bg-video-2/ — это путь к вашим видео-файлам на сервере, а bg-video-2 — это названия файлов видео/изображений.

4. Сохраните изменение в файле HTML и обновите ваш сайт, для того чтобы просмотреть внесённые изменения.

Что делать, если Вы хотите добавить фоновое видео в какой-то из разделов страницы? Давайте сделаем следующее:

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

2. Откройте файлы HTML, которые используются для страницы, в которую Вы хотите внести изменения, в любом редакторе кода на вашем компьютере.

3. Многоцелевые шаблоны сайтов используют RD Background Video для добавления фонового видео страницы. Базовая разметка выглядит следующим образом:

   <div 
   			data-rd-video-path="video/bg-video-1/bg-video-1"
   			data-rd-video-image-xs="26"
   			data-rd-video-image-sm="26"
   			data-rd-video-image-md="37"
   			data-rd-video-image-lg="74"
   			data-rd-video-image-xlg="100"
   			class="rd-video"> 
   			Your content goes here
   		</div> 

   Где Your content goes here является содержимым вашей страницы/раздела.

4. Убедитесь, что Вы закрыли тег div в конце раздела. Видео не будет работать должным образом без закрывающего тега div.

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

6. Сохраните и загрузите изменённый файл назад на сервер. Проверьте ваш сайт для просмотра изменений.

Вы можете узнать больше о расширении RD Video Player, которое отвечает за фоновое видео RD, по этой ссылке.

Вы можете также ознакомиться с детальным видео-туториалом ниже: