Как добавить видео и музыку на сайт?

Здравствуйте дорогие друзья! Вы любите смотреть видео и слушать музыку? Знаю что любите, поэтому сегодня мы будем встраивать видео и аудио файлы к себе на сайт!

видео для сайта, музыка, как добавить

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

И так, данная инструкция будет состоять из двух частей:

Первая – добавление музыки

Вторая – добавление видео.

И так, давайте перейдем непосредственно к делу!

Для начала зайдите на сайт этого сервиса – http://flv-mp3.com/ru .

Перед вами появятся две модели для сборки:

Плееры для сайта

Начнем с Аудио файлов

Как видно с картинки, выше, для того, чтобы собрать плеер, соответственно, нужно нажать кнопку – Собрать.

Далее, я буду писать о каждом пункте, под цифрами.

1. Прописываем прямую ссылку, которая ведем к песне:

Я просто загрузил mp3 файл в корень сайта, вы же, можете разместить его в любой другой директории.

2. Путь к файлу плеера – здесь можно ничего не трогать, оставляем как есть:

3. В третьем пункте вы можете (по желанию) добавить какую-нибудь надпись, например:

4. Настраиваем время начала – прописываем минуты и секунды (по умолчанию, если стоит 00 00, то песня будет играть с самого начала).

5. Размеры плеера – выставить произвольные размеры не получится, так как сохраняется пропорция, но прописать Ширину в пикселях вы можете!

6. Если вы хотите, чтобы после того, как пользователь зашел на определенную страницу вашего сайта автоматически играла музыка, то выбираем соответствующий режим:

Не рекомендую ставить (громкую и раздражительную) фоновую музыку на весь сайт, так как если человек зайдет к вам на сайт, допустим, в час ночи, то ему не очень понравится внезапно заигравшая музыка.

Так что, рекомендую ставить авто воспроизведение только на отдельные страницы.

7. Вы можете выбрать либо цвет плеера, либо готовый скин.

Рекомендую выбирать готовый скин, так как он намного красивее и смотрится симпатичнее, хотя выбирайте на свой вкус и цвет 🙂

Для выбора цвета, нажмите на выпадающее меню:

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

Уже по названию можно предположить внешний вид будущего музыкального плеера, лично я перепробовал все варианты – больше часть скинов мне очень понравилась!

8. Завершающий этап сборки – это настройка громкости и выбор углов:

Громкость звука рекомендую оставить стандартной (то есть равной 70, углы выбирайте уже на своё усмотрения (я оставил закругленные).

Все готово, нажимаем на кнопку – Собрать и получить HTML код:

После нажатия вы получить примерно вот такой код:

Вставляем его в любое место, на любую страницу!

Вот пример готового плеера:

Также, примером будет страница обо мне, где музыка играет, а плеера практически не заметно.

Как сделать его незаметным? Для этого нужно выбрать скин, который называется – pattern-1.

Собираем видео плеер.

В начале все тоже самое – нажимаем – Собрать.

1. Прописываем путь к видео файлу, например:

2. Путь в файлу видео плеера оставляем неизменным:

3. Для того, чтобы в неактивном состоянии, до воспроизведения видео, красовалась какая-либо картинка, просто прописываем ссылку на ваше изображение:

Как видите, есть ограничения по форматам и размерам изображения:

Размеры: 500?375 px;

Формат: gif или jpg;

4. Делаем любую надпись, которая, в последствии, будет отображаться на самом плеере:

5. Размеры, также, как и с аудио плеером, пропорциональны, поэтому можно либо прописать размеры ширины, либо выбрать готовый стандартный вариант:

Стандартные размеры: 4:3 и 16:9

6. Можно выбрать цвет фона, после чего настроить цвет плеера или выбрать скин:

7. На этом этапе настроек можно выбрать фоновый цвет вашего сайта (по умолчанию белый):

Также, можно выбрать вид углов (прямые или закругленные), прописать цифровое значение яркости, контраста, насыщенности и оттенка.

8. Громкость оставляем как есть (70), если хотите, можно сделать погромче.

9. Если нужно, то можно выбрать пункт – Авто запуск.

10. На последнем пункте настроек, нужно выбрать поведение кнопок (стоп, play, перемотка и так далее..):

Выключены – кнопок вообще не будет видно

Включены – кнопки будут видны всегда

Появляются при – появятся только при наведении курсора мыши.

Все, нажимаем на красную кнопочку и получаем код:

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

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

Сам ролик вставлять не стал, все-таки нужно экономить место на хостинге, поэтому, для примера, просто добавил картинку.

Как видите, в этом нет ничего сложного – благодаря этому сервису, вы без труда и больших затрат времени сможете сделать страничку вашего сайта более интересной.

Добавление видео роликом и музыки на свой сайт – это неплохое дополнение ко моим советам по улучшению юзабилити сайта!

Ну что же, на этом все, подписывайтесь на обновления и получайте свежие статьи на тему продвижения сайтов, улучшения дизайна, уроков по wordpress и ещё много чего интересного!

Ваш Виталий Admin. Удачи!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Как добавить видео и музыку на сайт?: 20 комментариев

  1. Иван

    Виталий, я вставил видео на свой сайт через сервисы яндекс.видео и youtub. Мне кажется так намного проще. Заливаешь свое видео на эти сервисы, копируешь код и вставляешь на страницу в своем сайте. Это и место на хосте экономит, да и времени на это требуется куда меньше. Хотелось бы от вас услышать плюсы/минусы закачки видео на прямую на свой хост или от вышеупомянутых сервисов. Заранее спасибо.

    1. Виталий Admin

      Здравствуйте Иван, начнем с плюсов: 1. Оригинальный и уникальный дизайн плеера 2. Видео файл никогда не будет удален, так как он закачен на вашем хостинге. 3. Есть возможность встраивать музыкальные файлы, чего не получится сделать, например, через YouTube Минусы: 1. Как Вы уже говорили – это трата дискового пространства и системных ресурсов хостинг провайдера 2. Трата времени. В целом, этот сервис является полезным, если речь идет о вставке аудио файлов.

  2. Иван

    Виталий, спасибо за плюсы/минусы. Думаю, по ситуации оба варианта можно комбинировать.

    1. Виталий Admin

      Да, комбинирование – наиболее рациональный вариант.

  3. Иван

    Виталий, у меня в плеере автоматически в верхний правый угол подставляется ссылка на http://flv-mp3.com/. Как ее убрать?

    1. Виталий Admin

      Именно текстовая ссылка или логотип разработчика-ссылка в виде буквы “U” ?

      1. Иван

        Да, эта буква “U”, но она кликабельна и ведет на сайт сборки плеера.

        1. Виталий Admin

          Букву не убрать, так как это скрипт.

  4. Иван

    Еще такую вещь заметил – при прокрутке страницы вверх-вниз, видеоплеер и текст над ним все время куда-то съезжает. Проверил на других сайтах, где видео собрано этим же плеером – то же самое. Не знаете как убрать такой странный эффект?

    1. Виталий Admin

      Да, понял о каком эффекте идет речь, нет, к сожалению его не убрать, по крайней мере тоже когда-то задавался этим вопросом, такой же эффект присутствует у видео плеера от ютуба, если встраивать обычной ссылкой без плагина.

  5. Срелок

    Вставил на сайт с автозагрузкойь аудио плеер (работает) через час обновляю страницу нероботает

    1. Виталий Admin

      Видимо, в тот момент, сервис был временно недоступен, сейчас работает?

  6. Оля

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

    1. Виталий Admin

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

  7. Оля

    благодарю вас ! все верно ! уже наслаждаюсь музыкой !

    1. Виталий Admin

      Пожалуйста

  8. Максим

    Здравствуйте! Скажите, а как можно создать аудио-плейлист? я плеер вставил, но воспроизводится только одна песня, а как сделать, что бы много песен по очереди играли?

    1. Виталий Admin

      Здравствуйте, думаю, это можно сделать с помощью нового плеера: http://uppod.ru/

  9. Катя

    Здравствуйте, Виталий, я попробовала вставить аудио на не выложенный сайт, проверяю, выглядит как и положено, но музыка не идет. Объясните пожалуйста , как заполнить первый пункт (в описании), думаю что в нем ошибка. (где взять “прямую ссылку, которая ведет к песне”?)

    1. Виталий Admin

      Добрый день, для проверки плеера, загрузите в Корень сайта какую-нибудь песню, например, 5.mp3 и пропишите к ней путь. Если все нормально работает, значит, дело в Прямой ссылке, её можно взять с каких-нибудь свободных музыкальных сайтов, из контакта тоже, думаю, можно вытащить прямую ссылку.

Обсуждение закрыто.