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

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

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

Многим, думаю, уже поднадоел стандартный плеер от видео хостинга 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 и ещё много чего интересного!

Ваш Сергей Оганесян. Удачи!

Познавательное на сегодня: интересный ролик о тайнах древнейших цивилизаций, а именно о тайнах и загадочных технологиях Египтян..

[youtube]eTzUXJA6Lsk[/youtube]


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Иван пишет:

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

    • Здравствуйте Иван, начнем с плюсов:

      1. Оригинальный и уникальный дизайн плеера
      2. Видео файл никогда не будет удален, так как он закачен на вашем хостинге.
      3. Есть возможность встраивать музыкальные файлы, чего не получится сделать, например, через YouTube

      Минусы:
      1. Как Вы уже говорили – это трата дискового пространства и системных ресурсов хостинг провайдера
      2. Трата времени.

      В целом, этот сервис является полезным, если речь идет о вставке аудио файлов.

  2. Иван пишет:

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

  3. Иван пишет:

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

  4. Иван пишет:

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

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

  5. Срелок пишет:

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

  6. Оля пишет:

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

  7. Оля пишет:

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

  8. Максим пишет:

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

  9. Катя пишет:

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

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

Оставить комментарий

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

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>