Strong-stuff.ru

Образование Онлайн
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Adobe muse видеофон

Видео фон для сайта в 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 и попробуем здесь что-то поменять. Давайте, например, поменяем цвета в настройках плеера. Давайте посмотрим, что получилось. Нажимаем «Просмотр» и видим, что какие-то изменения уже произошли, и теперь поменялись все цвета. Вот таким вот образом вы можете настраивать данный виджет и данное окошко видеоплеера.

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

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

Adobe Muse

На этой странице

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Приложение Adobe Muse позволяет добавлять видео в качестве фона веб-страницы. Обычно добавляемые видеофоны настроены для автоматического воспроизведения во время загрузки страницы. Видеофоны оживляют веб-контент и придают ему более динамичные свойства.

Виджет Background Video в Adobe Muse позволяет добавлять видеофон веб-страницы несколькими щелчками мышью. Этот виджет является полностью настраиваемым и требует указания URL-адреса видео на YouTube или Vimeo.

Загрузка виджета Background Video

Откройте следующую ссылку в браузере:

Нажмите кнопку Get This Widget (Загрузить виджет).

Виджет Background Video загружается в папку загрузок по умолчанию. Конфигурации папки «Загрузки» зависят от браузера, который вы использовали для загрузки виджета, и операционной системы компьютера.

Добавление и настройка фонового видео

Чтобы добавить видеофон на веб-страницу, выполните следующие действия:

В приложении Adobe Muse выберите пункт меню Окно > Библиотека . Откроется панель «Библиотека». Нажмите кнопку и импортируйте виджет Background Video.

Дополнительные сведения о загрузке виджета Background Video приведены в разделе Загрузка виджета Background Video.

На панели «Библиотека» выберите Background Video > Background Video и перетащите этот виджет на холст веб-страницы.

Выберите виджет Background Video и нажмите кнопку . Появится панель «Параметры».

На панели «Параметры» выполните следующее действие:

URL-адрес видео на YouTube или Vimeo

Укажите URL-адрес видео на YouTube или Vimeo для добавления в качестве видеофона. Следует обязательно скопировать полный адрес в поле URL-адреса для видео.

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

Скрыть видео (во время разработки)

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

Разрешить элементы управления видео

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

Если возможно, использовать HD

YouTube и Vimeo поддерживают HD-видео. Если выбран этот параметр, виджет может автоматически определить, какую версию видео (HD или SD) следует воспроизводить.

Определяет, требуется ли непрерывное воспроизведение видео.

Скрыть рекламные объявления

Позволяет увеличить видеофон при воспроизведении видео и скрыть всплывающие рекламные объявления.

Для завершения настройки нажмите в любом месте за пределами панели «Параметры». Просмотрите веб-страницу или сайт в режиме Просмотр приложения Adobe Muse или выберите пункт Файл > Страница в браузере .

Как установить HTML видео плеер на сайт, сделанный в Adobe Muse

Приветствую Вас, уважаемый читатель и создатель сайтов. Этой статьей я открываю очередную рубрику на моем блоге. Называется она «Обзоры виджетов».

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

За то время, что работаю в Adobe Muse я не раз убеждался, что не каждый виджет действительно нужен на сайте. Ведь по сути, что такое виджет? Это некий инструмент, который добавляет некий фунционал на Ваш сайт. А кто сказал, что каждый функционал необходим?!

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

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

Сегодня я расскажу об очень полезном виджете, который позволит Вам размещать видео на Вашем сайте в формате HTML. так называемый HTML видео плееер. Хочу сразу пояснить, что это не очередной виджет плеера, который добавляет на Ваш сайт видео с YouTube или Vimeo. Такие виджеты встроены по умолчанию, если кто ещё не знал, в Adobe Muse. Этот же плеер воспроизводит видео, которое будет размещено на Вашем хостинге

Читать еще:  Как можно найти видео

Итак, называется этот виджет, как ни странно, HTML VIDEO PlAYER от компании Qooqee.

Вот ссылка на страницу с описанием виджета:

Стоимость его составляет 7$. На момент написания статьи это приблизительно 392 рубля. Дорого это или дешево? Не знаю. Для каждого по своему. Но только я придерживаюсь одного простого правила — любой труд должен оплачиваться.

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

После того, как Вы его установили в Adobe Muse, можете приступать к настройке. Для этого выберите его в панели инструментов «Библиотека» и перетащите на рабочую поверхность Вашего проекта.

Нажав на синий кружок в правом верхнем углу виджета у Вас откроется панель его настройки.

Перед тем, как мы перейдем к настройкам виджета я хочу пояснить о форматах, которые необходимо использовать. Виджет принимает три формата видео — .mp4, OGG (OGV), WEBM. Эти форматы необходимы для того, чтобы видео могло проигрываться во всех браузерах.

Вот таблица, в которой показано какие браузеры какой формат «кушают».

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

Давайте теперь пройдемся поподробнее по настройкам.

В самом верху находится раздел VIDEO FILES. В нем Вы можете задать ссылки на ваши файлы с видео. Имеются два метода добавления видео на сайт. Метод первый — Add Files. Т.е, Вы добавляете видео с Вашего компьютера в Ваш проект. Для каждого формата видео есть своя строчка.

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

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

  • Кнопка или поле для ввода ссылки (в зависимости от метода добавления) для размещения постера к видео. Т.е., изображения, которое будет показано пока в плеере не нажмут на кнопку пуска
  • Выбор цвета для контроллера плеера
  • Выбор цвета для фона контроллера плеера
  • Выбор цвета для строки прогресса плеера (шкала времени видео)
  • Выбор цвета фона для строки прогресса видео

С этим я думаю все предельно ясно.

Последним разделом в настройках виджета идет Layot Options. В нем Вы можете задать такие параметры, как:

  • Отключение/включение кнопки управления
  • Размер строки состояния и текста
  • Форму кнопки управления (квадратная ил круглая)
  • Положение кнопки управления (центр, левый верхний угол, правый верхний угол, левый нижний угол или правый нижний угол)
  • Фильтра для видео (размытие, оттенки серого, сепия, негатив, насыщенность цветов)

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

Для таких случаев я всегда использую одну очень удобную программу. К то же она и бесплатная. Называется она Freemake Video Converter

Скачайте и установите её к себе на компьютер.

Скачали?! Установили?! Отлично! Идём дальше!

Для того, чтобы Вы могли сконвертировать (именно так называется процесс преобразования видео в различные форматы) Ваше видео в форматы HTML5, необходимо запустить программу и для начала выбрать видео файл на Вашем компьютере.

После этого Вам необходимо прокрутить карусель форматов вправо до тех пор, пока не найдете иконку HTML5.

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

После того, как совершили все настройки, нажимайте кнопку «Конвертировать». И в зависимости от мощности Вашего компьютера и размера видео ожидайте завершения конвертации.

После того, как видео сконвертируется Вы сможете добавить все форматы в наш виджет в Adobe Muse.

Важно! Не называйте файлы видео русскими буквами, только латиницей. Чтобы у Вас не возникло проблем в дальнейшем.

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

Также, если Вам данная статья оказалась полезной расскажите о ней кликнув на одной из кнопок слева.

Ссылка на основную публикацию
Adblock
detector