Strong-stuff.ru

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

Как вставить видео в muse

Как добавить видео с YouTube на сайт

Как добавить видео с YouTube на сайт?

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

Как добавить видео с YouTube на сайт

Заходим сразу в программу Adobe Muse, у меня создан новый чистый проект. И сейчас я вам покажу, как вставить видео с YouTube. Для этого мы будем использовать “Библиотеку мини приложений” Adobe Muse, в которой есть стандартные функции для размещения кнопок, меню и так далее. Нас интересует вкладка «Социальная сеть». Здесь расположено мини-приложение, которое и называется YouTube. Мы просто выделяем данное мини приложение, перетаскиваем левой клавишей мыши на страницу своего сайта, проходит некоторое время, и мы получаем вот такую картинку.

Теперь нам доступны параметры картинки данного мини приложения.

Ролик из YouTube очень просто добавляется на страницу вашего сайта. Можем считать, что мы уже разместили один ролик, просто перетащив виджет (данное мини приложение), на свою страницу сайта.

Как добавить видео с YouTube. Размещение своего видео.

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

Мы заходим в браузер, на канал You Tube. Я буду брать видео со своего канала Muse уроки, вы же можете выбрать любое своё видео. И что я делаю? Я просто кликаю на это видео, для просмотра, вы видите, что запустилось моё видео. Но нас интересует вот эта надпись – строка браузера. Мы видим стандартные “https://www.youtube.com/watch?v=” и всё, что после «=», мы просто берём и копируем. Возвращаюсь в Adobe Muse, захожу в настройки данного мини-приложения, вставляю сюда данный код.

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

Таким образом, вы видите, что на странице разместилось моё видео и вполне себе даже проигрывается, при нажатии на него левой кнопкой мыши.

Давайте снова перейдём в режим дизайна, и посмотрим, какие настройки есть у данного мини-приложения.

Как добавить видео с YouTube. Настройки Мини-приложения YouTube

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

Читать еще:  Лунтик крючком видео

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

«Время начала» – мы можем выбрать с какого времени начать проигрывать наш видео ролик. Если мы поставим здесь 10, например, то через 10 секунд будет запускаться просмотр нашего видео ролика. Вы видите, что ползунок уже переместился чуть-чуть вперёд.

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

Как добавить видео с YouTube. Пример настроек.

Если мы сейчас всё поменяем, я поставлю, например, «светлое», «белый», и уберу все элементы кроме элементов управления, и перейду в режим просмотра, то вы увидите, что у меня получилось. Индикатор наполнения у нас теперь белый, бегунок у нас стоит сразу на 10 секундах (видео начнёт проигрываться сразу с 10-секундной отметки), хвост белый теперь, а не красный, и остальные элементы отсутствуют, кроме нижнего бара управлений.

Нажимаем «проигрывать», и видео начинает проигрываться сразу с 10 секунды.

Вот так просто вы сможете вставить видео с YouTube на сайт, в программе 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