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