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

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

Новые шаблоны

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, по этой ссылке.

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

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