Categories

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

JS Animated. Как работать с Vide — Background video

Erica Saunders Февраль 2, 2016
Rating: 5.0/5. From 2 votes.
Please wait...

Наша Команда техподдержки рада представить Вам новый туториал, который покажет, как работать с Vide — Background video в Веб-шаблонах.

JS Animated. Как работать с Vide — Background video

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

  1. Конвертируйте ваше видео в 3 формата: *.mp4, *.ogv, *.webm. Названия файлов должны совпадать (например, video_1.mp4, video_1.ogv, video_1.webm). Вы можете ознакомиться с видео-туториалом, который покажет, как конвертировать видео-файлы.

  2. Подготовьте изображение для отображения в браузерах, которые не поддерживают отображение фонового видео, а также на мобильных устройствах (например, video_1.jpg).

  3. Войдите в ваш клиент FTP или откройте Файловый менеджер Панели управления хостингом, для того чтобы получить доступ к файлам сайта и загрузить видео-файлы в папку ‘video’:

    48.JS_Animated.How_to_work_with_Vide-Background_video_1
  4. Откройте ваш файл *.html, для того чтобы добавить новое видео на страницу. В нашем случае, нужно открыть файл index.html.

  5. В соответствующем блоке с классом .vide укажите путь к ранее созданным файлам в атрибуте data-vide-bg. Не указывайте расширения файлов. Например:

    <div class="vide" data-vide-bg="video/video_1"> Your content </div>

    В данном примере video/video_1 — это путь к вашему видео-файлу (без расширения, которое указывает формат файла). Вы можете также изменить содержимое, как это показано ниже:

    48.JS_Animated.How_to_work_with_Vide-Background_video_2
  6. Сохраните изменения и загрузите файлы назад на сервер, если Вы используете FTP. Далее, обновите страницу сайта для просмотра внесённых изменений:

    48.JS_Animated.How_to_work_with_Vide-Background_video_3

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

JS Animated. Как работать с Vide – Фоновое видео
Эта запись была размещена в JS Animated туториалы и помечена как background, HTML, video. Добавьте в закладки постоянную ссылку.

Submit a ticket

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