Что нужно знать
- На странице Главная в виде План перейдите в Окно >Library > [MR] Fullscreen Background Video и перетащите виджет на страницу.
- Чтобы добавить видео, перейдите в Файл > Добавить файлы для загрузки > папка видео > Открыть.
Adobe Muse позволяет создавать веб-страницы, используя рабочий процесс, аналогичный публикациям; вам не нужно глубокое понимание кода, который создает сайт или страницу, хотя знакомство с HTML5, CSS и JavaScript не помешает. Хотя традиционное веб-видео обычно добавляется через HTML5 Video API, Adobe Muse выполняет то же самое с помощью виджетов, которые создают HTML 5, необходимый для определенных задач, но используют простой интерфейс в Muse для написания кода при публикации страницы.
Как подготовить страницу для фонового видео в Adobe Muse CC
Установив виджет, вы можете создать страницу, которая будет использовать видео.
- Прежде чем начать, создайте папку для своего сайта Muse. Внутри этой папки создайте еще одну папку - мы используем «медиа» - и переместите в нее свои версии видео в форматах mp4 и webm.
- При запуске Muse выберите Файл > Новый сайт.
- Когда откроется диалоговое окно Макет, выберите Рабочий стол в качестве Исходный макет и измените Ширина страницыи Высота страницы равны 1200 и 900 . Нажмите OK..
-
Дважды щелкните Главная страница в представлении «План», чтобы открыть главную страницу. Когда откроется мастер-страница, переместите направляющие верхнего и нижнего колонтитула вверх и вниз страницы. Для этого примера вам действительно не нужны верхний и нижний колонтитулы.
Как использовать виджет полноэкранного фонового видео в Adobe Muse CC
Использовать виджет очень просто.
- Первое, что вам нужно сделать, это вернуться к просмотру плана, выбрав Просмотр > Режим планирования.
- Когда откроется вид в плане, дважды щелкните Главную страницу, чтобы открыть ее.
- Откройте панель библиотеки – если она не открыта в правой части интерфейса, выберите Окно > Библиотека – и прокрутите папку [MR] Fullscreen Background Video.
- Перетащите виджет папки на страницу.
-
Вы заметите, что Опции просят вас ввести названия версий видео в форматах mp4 и webm. Введите имена точно так, как они написаны в папке, куда вы их поместили. Один маленький трюк, чтобы убедиться, что вы не ошибетесь, - это скопировать название видео в формате mp4 и вставить его в области MP4 и WEBM. меню Опции
Еще одна хитрость: все, что делает этот виджет, - это пишет для вас код HTML 5. Вы можете сказать это, потому что видите в виджете. В этом случае вы можете поместить виджет с веб-страницы на монтажный стол, и он все равно будет работать. Таким образом, он не будет мешать любому контенту, который вы разместите на странице.
Как добавить видео и протестировать страницу в Adobe Muse CC
Несмотря на то, что вы добавили код для воспроизведения видео, Muse по-прежнему не знает, где находятся эти видео.
- Чтобы это исправить, выберите Файл > Добавить файлы для загрузки.
- Когда откроется диалоговое окно Загрузить, перейдите в папку, содержащую ваши видео, выберите их и нажмите Открыть.
-
Чтобы убедиться, что они были загружены, откройте панель Ресурсы,, и вы должны увидеть свои два видео. Просто оставьте их на панели. Их не нужно размещать на странице.
- Чтобы протестировать проект, выберите Файл > Предварительный просмотр страницы в браузере или, поскольку это одна страница, Файл > Предварительный просмотр сайта в браузере. Откроется браузер по умолчанию, и начнется воспроизведение видео.
- На этом этапе вы можете рассматривать файл Muse как обычную веб-страницу и добавлять контент на домашнюю страницу, а видео будет воспроизводиться под ним.
Как добавить рамку видеоплаката в Adobe Muse CC
Это веб-сайт, о котором мы говорим здесь, и, в зависимости от скорости соединения, есть большая вероятность, что ваш пользователь может открыть страницу и смотреть на пустой экран во время загрузки видео. Это не хорошая вещь. Вот как справиться с этой гадостью.
Рекомендуется включать кадр постера видео, который будет появляться во время загрузки видео. Обычно это полноразмерный скриншот кадра из видео.
- Чтобы добавить рамку постера, нажмите один раз на Заливка в браузере в верхней части страницы.
- Нажмите на ссылку Изображение и перейдите к нужному изображению.
- В области Подгонка выберите Масштаб для заполнения и нажмите Центральная точка в область Позиция. Это гарантирует, что изображение всегда будет масштабироваться от центра изображения при изменении размера области просмотра браузера. Вы также увидите изображение, заполняющее страницу.
- Еще одна небольшая хитрость - использовать сплошной цвет заливки на случай, если рамка постера появится не сразу. Для этого нажмите на фишку Color, чтобы открыть палитру цветов Muse. Выберите инструмент eyeddropper и щелкните преобладающий цвет на изображении. По завершении щелкните страницу, чтобы закрыть диалоговое окно «Заполнение браузера».
-
На этом этапе вы можете сохранить проект или опубликовать его.
В заключительной части этой серии статей показано, как написать код HTML5, который вставляет видео в фон веб-страницы.
