Продолжаем доделывать нашу открытку к Первому Дню Зимы, хотя возможно, вы делаете другую. Сегодня я хотела бы показать, как встроить видео и аудио в вашу музыкальную открытку, да и вообще на любой сайт.

Для того, чтобы вставить музыку, вам понадобится на сайте http://flv-mp3.com/ (ссылка не активная, скопируйте ее в адресную строку) собрать аудиоплеер, скопировать готовый html код, и вставить этот код в вашу открытку во вкладке КОД вашего конструктора, в котором вы делаете вашу открытку.

Но предварительно необходимо будет загрузить нужный аудиофайл на ваш хостинг, и правильно скопировать адрес его расположения. Я специально для всех аудиофайлов сделала папку audio, и в нее загружаю всю музыку. Таким образом, зная название файла, я еще даже не загружая его на хостинг, знаю какой будет у него адрес: http://ваш домен/audiо/название файла.mp3. Обратите внимание, чтобы название ваших папок было без пробелов и только латинскими буквами. Если вы скачали песню с русским названием, переименуйте файл, перед тем, как загружать его на хостинг.

Как загрузить аудиофайл на хостинг?

Я для этого пользуюсь файловым менеджером FileZilla. Если вы не умеете им пользоваться или не знаете, где его взять - пишите в комментариях, я поделюсь программой и сделаю небольшой урок по ней. Хотя, я думаю, вы все это можете спокойно найти в интернете. Но если все же вы не умеете пользоваться данной программой, то заходите через панель управления, создавайте нужную дитректорию, и загружайте нужные вам файлы. Я вначале  так и делала.

Я покажу на примере своего хостинга, но в любом случае все эти функции есть на любом хостинге.

00

 

 

01

 

 

02

 

03

 

04

 

 

05

 

06

 

Остальное, как собрать плеер и встроить аудио в вашу открытку, вы посмотрите в уроке.

Как встроить видео в вашу открытку

 

Сначала его надо сделать. Если у вас нет программы, и вы не знаете, как его сделать, читайте ЗДЕСЬ. Затем это видео следует загрузить на канал ютуб, а для этого вам понадобится зарегистрироваться на Gmai, и у вас будет свой канал с вашими видео. Конечно, вы можете на том же сайте, где делали аудиоплеер, собрать и видеоплеер, но тогда ваш файл с видео придется загружать на хостинг, а это занимает место на вашем хостинге. Если у вас его много, то можете добавить, если же места на хостинге не так много, то лучше воспользоваться каналом Youtube.

Если вы не хотите делать видео самостоятельно, то находите для себя подходящее на канале Ютуб, нажимайте кнопку - поделиться - html, выбирайте подходящий вам размер, убирайте все ненужные галочки (чтобы не было показа похожих видео), копируйте полученный код и вставляйте в код вашей открытки. Видео будет отображаться только после того, как ваша открытка будет загружена на хостинг. В уроке я показала, как я загружаю открытку на хостинг, но можете не спешить, потому что об этом расскажу более подробно. Просто я хотела показать, что это работает, чтобы вы не переживали, что в конструкторе пишется, что видео не найдено.

В полученном коде надо будет добавить небольшое добавление - параметр, который отвечает за то, чтобы видео запускалось автоматически. Этот параметр   &autoplay=1. Вот код, который я скопировала с ютуба:

<iframe width="640" height="360" src="//www.youtube.com/embed/tum-I9GX1yc?rel=0" frameborder="0" allowfullscreen></iframe>

Я добавила данное расширение и получилось:

<iframe width="640" height="360" src="//www.youtube.com/embed/tum-I9GX1yc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Чтобы проверить, как будет отображаться ваше видео, скопируйте в ардресную строку ту часть, которую я подчеркнула и выделила жирным, и вы увидете то, как будет проигрываться ваше видео:

//www.youtube.com/embed/tum-I9GX1yc?rel=0&autoplay=1   -  в адресную строку.

Можно еще добавить один параметр, который отвечает за качество отображения видео: &fmt=6   Устанавливает хорошее качество видео: &fmt=18 еще лучше, а &fmt=22 будет наилучшим. Изначально видео должно быть в high definition (HD) качестве (HD) для работы параметра.

Тогда мой код будет выглядеть следующим образом:

<iframe width="640" height="360" src="//www.youtube.com/embed/tum-I9GX1yc?rel=0&autoplay=1&fmt=22" frameborder="0" allowfullscreen></iframe>

Остальное смотрите в видео, которое я для вас приготовила. Если будут вопросы, пишите в комменнтариях.

Вот открыточки, которые у меня получились, еще, правда, кое-что надо доделать, но в принципе они почти готовы:

https://internet-ledi.ru//zima/spervumdnemzimu.htm

https://internet-ledi.ru//zima/pervuydenzimu.htm

Жду ваших отзывов и комментариев.

12 комментариев: Как встроить видео и аудио в вашу музыкальную открытку

Страница 1 из 11
  • Олеся говорит:

    Спасибо вам. Вы случайно не знаете, что нужно поменять в коде плеера с предлагаемого вами сайта, чтобы мелодия проигрывалась не один раз, а беспрерывно? Ещё раз спасибо.

    • Людмила говорит:

      Олеся, честно сказать не задумывалась над этим, надо будет посмотреть, иногда я получаю такие открытки, когда музыка проигрывается по кругу, но я думала. что это зависит от настроек собственного плеера. Если разберетесь раньше, поделитесь ответом..

  • Евгения говорит:

    Людмила,большое Вам спасибо! У Вас золотые руки и такое же золотое сердце. Вы дарите людям радость и это вернется Вам сторицей. Пусть сбываются все Ваши начинания и задумки. Огромного Вам здоровья , с уважением Евгения

  • Tatyana говорит:

    За урок спасибо! Но иногда складывается впечатление, что автор сам не просматривает свои видео. Если бы посмотрел, то увидел, а ещё лучше услышал, что музыка в обучающих уроках абсолютно лишнее приложение, тем более такая громкая. 

    • Людмила говорит:

      Татьяна, я убрала музыку из урока, буду делать без музыки, раз она лишняя

  • Галина говорит:

    Людмила,Ваши открытки волшебные! Очень хочу научиться делать такие-же. Внимательно изучаю Ваши уроки. СПАСИБО ВАМ за Ваше доброе сердце!

    • Людмила говорит:

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

  • Галина говорит:

    Людмила, спасибо большое за урок! Не знала, как можно сделать, чтобы видео автоматически включалось. У Вас очень хорошо показано. Удачи Вам!

  • Надежда говорит:

    Здравствуйте Людмила ! Набрела случайно на ваш сайт или блог-нашла много полезностей—Спасибо вам огромное ! передо мной открыто столько страниц и столько мнений -что я совсем запуталась. в голове каша. Мне 57 лет-поздновато начала учиться-а так хочется сделать или хороший сайт или хороший блог. Имею небольшой опыт создания видео( https://www.youtube.com/channel/UCbt_b3O-WpzBQaC3FhF1XhA/featured). Но хочется приработок к пенсии-инвалидности. В голове каша, мне так не хватает рядом наставника . Я на блоге не могу сделать муз открытки-да и вообще свои мысли собрать в кучку не получается. Помогите пожалуйста ! Я пробовала учиться в разных школах-но там везде азы и ничего более. Оплату гарантирую. Пожалуйста помогите !

    • Людмила говорит:

      Здравствуйте, Надежда, благодарю за отзыв, мой ответ я выслала на Ваш почтовый адрес.

  • Лариса говорит:

    Спасибо за красоту и прекрасные уроки! Успехов Вам, Людмила, в Вашем благородном деле !

Страница 1 из 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Авторизация на сайте
Магазин
katalog
КАК УБЕРЕЧЬ СВОЙ КОМПЬЮТЕР ОТ ВНЕЗАПНОЙ СМЕРТИ
plus_i_minus4
turbobanner220
Как спасти от краха свой онлайн бизнес
Подпишись на новости сайта: