Видео фон для сайта в Adobe Muse

Видео фон для сайта в Adobe Muse.

Это видео о том, как работать с первыми тремя виджетами с помощью которых мы можем создать видео фон для сайта. Это виджеты от muse themes из пакета toolbox (49 виджетов): виджет видео фона, виджет размещения видео во всю ширину браузера и виджет размещения видеоплеера с возможностью настройки дизайна кнопок и панелей.

В этом видеоуроке подробно рассказывается о всех параметрах виджетов и на примере показывается как они работают при выгрузке сайта на хостинг. Смотрите видеоурок:

Эти 3 виджета видеофона похожи между собой, поэтому я их объединил в один видеоурок.

Видео фон для сайта. Виджет – VIDEO BACKGROUNDS.

Давайте рассмотрим первый из них – Videos – Video Backgrounds. Я добавляю виджет на сайт и располагаю здесь. И мы видим, какие у него есть параметры.

Видео фон для сайта. Video Backgrounds. Настройка видеофайлов.

Первый параметр – это Video File (.mp4), который подсказывает нам, что необходимо здесь указать имя файла с расширением .mp4.

Вторая настройка – это Video File (.webm). Это имя видеофайла, только в формате webm. Третья настройка – Специальное сообщение (Specify Error Message), которое говорит нам, например, о  том, что браузер не поддерживает видео (This browser does not support video). Здесь написано по-английски. Вы можете написать здесь надпись эту по-русски.

Видео фон для сайта. Video Backgrounds. Настройка расположения видео

Третья настройка – это настройка, каким образом будет располагаться наше видео на сайте (Video Scaling), например, на всю ширину и фиксировано (Full Width – Fixed), т.е. видео не будет прокручиваться с прокруткой страницы. Также можно выбрать расположение во всю высоту (Full Height – Scrolling), таким образом, видео будет прокручиваться и будет растянуто на всю высоту нашей страницы. Если вы ставите эту настройку, то смотрите, чтобы высота страницы была не больше, чем высота видео или хотя бы не намного больше, поскольку видео будет растягиваться во всю его высоту.

Видео фон для сайта. Video Backgrounds. Настройка изображения поверх видео.

Четвертая настройка – это настройка изображения (Pattern Overlay), которое будет установлено поверх видео и степень прозрачности данного изображения (Pattern Opacity).

Видео фон для сайта. Video Backgrounds. Добавление файлов для передачи.

Для того, чтобы нам добавить файлы в программе Adobe Muse и они экспортировались на хостинг после публикации сайта, нам необходимо добавить файлы для передачи. Это какие файлы? Это файлы «Video File в формате mp4, «Video File» в формате webm и картинку. Картинку добавлять необязательно.

Видеофайлы и картинка добавляются с помощью функции программы «Файл», далее выбрать «Добавить файлы для передачи». Мы нажимаем сюда и попадаем в окошко Windows, где мы должны на своем компьютере выбрать те необходимые файлы.

Вот эти файлы. Один файл у меня в формате mp4, здесь, правда, не видно, что это формат в mp4, но это видео файл. Он весит 14 МБ и его продолжительность 14 секунд. Следующий видеофайл – это «video2.webm» в видеоформате webw. Этот файл весит намного меньше и проигрывается в некоторых типах браузера.

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

Мы выделяем все эти файлы и нажимаем «Открыть». Файлы добавляются для передачи в программу Adobe Muse. Посмотреть, что файлы добавились, вы можете в панели «Ресурсы». Если вы зайдете в панель «Ресурсы», то вы увидите, что здесь у нас добавлены именно эти 3 файла. Напротив каждого из них находится надпись «Передать». Т.е. при публикации сайта на хостинг данные файлы будут переданы вместе с остальными файлами сайта. И данные файлы будут храниться в отдельной папке «Assets».

Видео фон для сайта. Video Backgrounds. Настройка имен файлов.

Вы видите, что названия моих видеофайлов – это «video2.mp4» и «video2.webm». Данные имена файлов нам необходимо прописать в виджете. Вот здесь вместо sample.mp4 нам необходимо написать: video2.mp4. И точно также нам необходимо написать имя файла: video2.webm. Здесь, где у нас находится «Pattern Overlay» мы должны указать имя файла «BG2.jpg». Все, данный виджет мы настроили и мы можем спокойно просматривать его через «Просмотр» в браузере.

Видео фон для сайта. Video Backgrounds. Просмотр.

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


Видео фон для сайта. Виджет – VIDEO FULL WIDTH.

Следующий виджет – это Videos – Full Width. Располагаем его на странице. И видим, что у нас сразу появляется вот такой огромный фрейм. Давайте я немного уменьшу масштаб, поскольку мы не видим настроек. Зайдем в настройки его и увидим, что здесь, в принципе, все те же самые настройки, которые и были в предыдущем виджете, только их немного меньше.

Видео фон для сайта. Video Full Width. Добавление файла видео.

В первой настройке мы должны указать формат видеофайла в формате mp4. Во втором окошке мы должны указать формат файла webm. Давайте я просто пропишу здесь двойки, поскольку у меня видео называется «video2».

Видео фон для сайта. Video Full Width. Настройка.

Здесь мы можем отключить звук видео (Mute Video) и поставить проигрываться видео по кругу (Loop Video). А также добавить сообщение (Specify Error Message), если браузер не поддерживает HTML5 видео. В этом случае в браузере будет отображаться вот эта надпись (This browser does not support HTML5 video).

Видео фон для сайта. Video Full Width. Просмотр.

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


Видео фон для сайта. Виджет – HTML5 VIDEO PLAYER.

Давайте снова уйдем в режим «Дизайна» страницы и рассмотрим третий виджет. Это виджет Videos – HTML5 Video Player. Я размещаю его на страницу. Размещу по центру. И зайдем в его настройки. Здесь уже в настройках немного больше настроек. Давайте рассмотрим и их тоже.

Видео фон для сайта. HTML5 Video Player. Настройка ID.

Первая настройка здесь – это Video Name/ ID. Здесь написано: Oceans. Это уникальное имя для видео и если вы собираетесь использовать несколько экземпляров этого виджета на одной странице, эти имена должны отличаться. В принципе, здесь вы можете написать совершенно любое слово, например, просто поставить «v1». Это будет означать, что это у вас первый виджет, который вы разместили на данной странице.

Видео фон для сайта. HTML5 Video Player. Настройка путей к файлам.

Следующие три настройки – это настройки путей к видеофайлам. Здесь вы видите довольно длинные URL-адреса, что касаются добавленных файлов в программу, т.е. те файлы, которые мы добавили «video2.mp4» и «video2.webm». Вы можете написать здесь путь, по которому будут лежать данные файлы в папке на вашем сервере. Эта папка называется «Assets», а файл наш называется «video2.mp4».

Тот же самый путь мы можем прописать и во втором окошке, только изменить mp4 на webm. И точно такой же путь мы должны указать для файла нашей картинки. Мы точно также вставляем в это окошко этот путь и прописываем здесь название этой картинки. Картинка у нас называется «BG2.jpg». И таким образом, вы настраиваете здесь расположение данных картинок, которые вы добавили через «Файл», далее выбрав «Добавить файлы для передачи».

Видео фон для сайта. HTML5 Video Player. Настройка воспроизведения.

Что еще есть в настройках данного виджета? Дальше идет автоматическое воспроизведение (Automatic Playback), т.е. при загрузке страницы сразу начнется проигрывание видео в данном плеере.  Здесь вы можете поставить флажок проигрывание видео по кругу (Loop Video). И установить показывать ли инструменты управления видеоплеером (Show Player Control), галочка по умолчанию стоит, поэтому инструменты управления видеоплеером будут видны.

Видео фон для сайта. HTML5 Video Player. Дизайн.

Дальше вы выбираете цвет скина для вашего плеера (Player Skin Color), по умолчанию стоит черный. Выбираете цвет текста и иконки плеера (Text/Icon Color). А также можете отрегулировать размер текста видео  в процентах (Control Text Size (%)), максимальное значение здесь 200%.

Следующая настройка это цвет нашего Progress Bar, это цвет background его (Progress Bar – Background). И последняя настройка – это цвет уже проигранного видео (Progress Bar – Playing).

Давайте выгрузим данную страничку на хостинг Business Catalyst «Публикация на Business Catalyst», я выбрал здесь название файла «videobg04.businesscatalyst.com», нажимаю «ок». Файлы экспортировались на хостинг Business Catalyst и сайт открылся в браузере. Вы видите, что первый виджет у нас работает, а второй почему-то не очень-то и хочет.  Давайте закроем данную страницу. Все дело было в том, что я неправильно написал имена файлов. Я исправил данные имена файлов и теперь снова экспортирую сайт на хостинг.

Видео фон для сайта. HTML5 Video Player. Публикация.

Открываю «Файл» и выбираю «Публикация на Business Catalyst», нажимаю «ок». И сайт снова открывается в браузере для просмотра. Теперь мы видим, что данный плеер работает, и у нас появился вот такой значок запуска данного видео. Я нажимаю на этот значок, и у нас начинается проигрывание видео. Вы видите Progress Bar синего цвета и этот цвет background этого бара. И цвет background уже проигранной части видео, он оранжевый. Здесь вы видите также, что цвет самого окна управления черный и на нем белые иконки. Это все настраивается в данном виджете в его настройках.

Видео фон для сайта. HTML5 Video Player. Пример изменения дизайна.

Давайте снова перейдем в программу Adobe Muse и попробуем здесь что-то поменять. Давайте, например, поменяем цвета в настройках плеера. Давайте посмотрим, что получилось. Нажимаем «Просмотр» и видим, что какие-то изменения уже произошли, и теперь поменялись все цвета. Вот таким вот образом вы можете настраивать данный виджет и данное окошко видеоплеера.

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

С вами был Дмитрий Шаповалов. Оставайтесь на моем канале, смотрите мои следующие и предыдущие видео. Подписывайтесь на мой канал, если вы еще этого не сделали. Ставьте лайки видео и пишите комментарии. До встречи в следующих видеоуроках!

 

Автор видеоурока
Дмитрий Шаповалов

2 комментария к “Видео фон для сайта в Adobe Muse”

  1. Video Full Width не хочет работать на хостинге. В чём может быть причина? Спасибо.

    Ответить
    • Трудно вот так сказать, недостаточно данных. Как что делали? Что за хостинг? и т.д. Возможно нужно пересмотреть видеоурок и попробовать для начала повторить один к одному как в уроке.
      Проблемы на хостингах бывают чаще всего с русскоязычными именами файлов видео, картинок, страниц сайта.

      Ответить

Оставьте комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: