Как установить 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.

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

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

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

С уважением, Владимир Гынгазов!