Получайте секретные материалы проекта на свой E-Mail:

Плеер на WordPress своими руками — проще некуда

Здравствуйте, дорогие читатели SeoKos.RU! Сегодня мы поговорим о том, как сделать плеер для wordpress. Универсальный и оригинальный плеер, т.е. он подойдет и для аудио, и для видео, плюс Вы сможете настроить внешний вид сами под себя.

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

Ой, чуть не забыл самое главное, называется сервис Uppod. Побегу вперед, и скажу сразу — плеер можно создавать не только на WordPress, а абсолютно на любую другую платформу, даже на чистый рукописный html сайт. Но мы будем разбирать на примере именно установку плеера на wordpress.

Про важность видеороликах в статьях думаю говорить не нужно, ну во-первых это красиво (Как добавить видео в wordpress), во-вторых положительно влияет на поведенческие факторы. Вообщем делайте видео в статьях, и не пожалеете!

Видео плеер от YouTube на блоге, это конечно хорошо, красиво, удобно, все просто великолепно. Но... будет еще «круче», если плеер будет оригинальным, своим, чтобы ни у кого такого не было. Да, здорово! Только вот мы не умеет делать плееры.

Я Вас обрадую, еще как — умеем! И в этом нам поможет бесплатный сервис Uppod, давай-те познакомимся ближе, и я на своих примерах покажу что и как делается...

Плеер для WordPress

1 шаг. Заходим на сайт, нажав сюда. Сейчас наша задача создать учетную запись на сайте, то есть зарегистрироваться. Для этого нажимаем кнопку «Регистрация», она находится в правом верхнем углу.

2 шаг. Далее заполняем предложенные поля, принимаем соглашения и нажимаем «Готово».

3 шаг. Наш перенаправляют в конструктор плееров. Наша задача выбрать какой плеер будет создавать: аудио, видео или фото. Давайте на примере разберем видео, остальное можно будет делать по аналогии. Значит на этом шаге выбираем «Видео», потом «Стили» и на плюс, вводим название стиля (любое) и жмем ОК .

 4 шаг. После нажатия ок, нас автоматически перебрасывает в окно конструктора плеера. Сейчас самое интересное — настройки.

5 шаг. Настраиваем внешний вид плеера. Слева в мы видим главные настройки, давай-те разберемся что отвечает за что.

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

Скругление —  полезная настройка. Она позволяет округлит нижние и верхние углы плеера. Благодаря этому Ваш плеер станет еще симпатичнее и привлекательнее. При правильном подходе может получится очень симпатично. Обычно я ставлю пятьдесят.

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

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

Цвет экрана — очень нужна настройка. Не томите Ваших читателей черным экраном, сделайте что-нибудь по красивее. Советую выбрать градиент, а красиво сопоставить два цвета под дизайн Вашего сайта.

Цвет фона — если вы сделали рамку вокруг плеера, то этой настройкой выберите цвет для нее.

Показывать названия — ну тут понятно, поставите галочку будет показываться название ролика, не выберите — не будет.

Вид надписей и Эффекты — к сожалению эти две фунции заблокированные для просто пользователя, т.е. платные. Поэтому ими пользоваться мы не будем. Если у Вас есть деньги, покупайте PRO и экспериментируете на своим плеером дальше.

Теперь переходим во вкладку «Панель» и видим следующее:

Цвет кнопок — выбираем каким цветом буду кнопки.

Прозрачность — установите на сколько будут прозрачны кнопки.

Высота панели — устанавливаем высоту панели с кнопками. Увеличивая число в поле, увеличивается высота панели.

Размер кнопок — какими бы Вы хотели видеть кнопки? Установите им размер.

Отступы — выберите будут ли отступы между панелью кнопок и краями плеера.

Подсказки — ставим галочку, чтобы наводя на кнопки появлялись подсказки, зачем она нужна.

Эффекты — так же платно...

Следующая вкладка «Кнопки», сейчас наша задача настроить кнопки. Какие будут в плеере, каким не место. А так же расположить их в панели.

Ставим нужные кнопки, которые бы Вы хотели видео у себя в плеере. Делается это легко, просто нажимаете на ну кнопку, которую бы хотели видеть, а ту которую не хотели удаляете. Чтобы удалить кнопку, нужно нажать на нее и в появившемся поле нажать «Удалить».

Далее располагаем кнопки у себя в панели. Делается это в правом окне, где идет предварительный просмотр. Нажимаете на нужную кнопку, и Вас предлагают три кнопочки: удалить, переместить вправо и переместить влево. Если хотите сделать кнопку правее нажимаете на кнопку вправо, если влево, то кнопку влево. Делаем до тех пор, пока не понравится самому (самой).

Следующая вкладка «Опции», здесь делаем следующие:

Язык — выбираем русский, ну может английский, если Вас так нужно.

Загрузка — начальное воспроизведение видео. Если хотим, чтобы видео загружалось автоматически, ставим «Автозапуск», если при клике пользователя, то «Ожидание» и т.д.

Заставка — если не хотите, чтобы пользователь, до того как начнет смотреть ролик, глазел на черный экран, можете сделать заставку. Это изображение, которое будет отображаться перед воспроизведением ролика.

Громкость — установите начальную громкость, в дальнейшем пользователь может изменить.

Автоповтор — ставьте галочку, если хотите, чтобы после окончания видео, он воспроизводился заново.

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

Далее только для PRO.

Далее вкладка «Плейлист», здесь мы настраиваем вид плейлиста, если такой требуется. Не буду так же, как и предыдущие вкладки подробно описывать, так как не вижу в этом смысла. Здесь настраивается все аналогичным образом, как во вкладке «Вид», мы говорили о ней в начале.

Вкладки «Логотип» и «Модули» открыты только для PRO.  Поэтому мы не будем говорить о них.

Далее еще раз все проверяем, после чего нажимаем кнопку «Сохранить» над окном предварительно просмотра.

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

Далее скачиваем плагин для WordPress здесь. Устанавливаем на блог (как раскрутить блог), и активируем.  Далее скачиваем сам плеер по ссылке и сохраняем на сервер (в главную директория сайта).

Далее переходим к настройках плагина. Заходим Плагины — Uppod — изменить. В переменной $uppod_settings["uppod.swf"] нужно указать путь к файлу плеера. Так же нужно прописать путь к стилям. Стили, скачанные раннее, переносим на сервер в папку с плеером. И в настройках прописываем следующее:

$uppod_audio["путь к стилям"] — для аудио

$uppod_video["путь к стилям"] — для видео

$uppod_photo["путь к стилям"] — для фото

Сохраняем настройки, и можно приступать к просмотру. В записях добавить плеер можно с помощью кодов:

[uppod video=http://адрес-сайта.ру/видео.flv] — для видео

[uppod audio=http://адрес-сайта.ру/аудио.mp3 comment="Название песни"] — для аудио

[uppod photo=http://uppod.net/sample.jpg,http://uppod.net/sample_2.jpg] - для фото (фотогалерея)

Вот так вот все это делается. И получается следующее:

Ну как Вам? По мне очень даже симпатично. Думаю не зря потратил столько времени, чтобы описать это все, Вам понравится. На часах у меня уже пол третьего ночи, нельзя здоровье губить, пора отдыхать. Напоследок посмотрите ролик, и поднимите настроение:

Так же небольшой опрос «Какая социальная сеть лучше?»:

[social_votes]

Всем пока!

С уважением, Томский школьник!

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 32
  1. Мне можно прость о помощи по установке плагина сама не могу

  2. Что значит директория сайта я на wordpress?

    • Валентина, это та папка, в которую установлен wordpress

  3. Ответить

    Оригинальный способ мотивировать понажимать на кнопочки соцсетей! А почему только 4 соцсети? Это плагин?

  4. Лидия, о том, как это осуществить скоро будет отдельная статья. Советую подписаться

  5. Очень хороший вариант для плеера.

  6. А можно ли как то реализовать музыку когда заходишь на блог, то есть, что бы она автоматом начала играть?

  7. Антон, Можно! Где-то встречал, как будет время я напишу Вам на почту.

  8. Ответить

    Мне бы для ДЛЕ инструкцию

    • ФСБ, там делается аналогично. Если что пишите в обратную связь!

  9. admin:

    Антон, Можно! Где-то встречал, как будет время я напишу Вам на почту.

    Буду очень благодарен!!!!

    • Антон, отправил инструкцию на e-mail

  10. Ответить

    Я тоже вставляю кодом, но через другой конструктор сайтов, там регистрироваться не надо 😉

  11. По чему то некорректно работает ваше голосование за Фейсбук не считает. 😥

  12. Ответить

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

  13. А не подскажите, как организовать кнопку в плейлист или в избранное, как например на сайте

    Может это какая-то видеогаллерея?

    Спасибо за ответы

  14. нерадивый бухгалтер:

    Я тоже вставляю кодом, но через другой конструктор сайтов, там регистрироваться не надо

    Через какой? Поделитесь секретом!

  15. Ответить

    Спасибо за статью, воспользуюсь уроком обязательно.

  16. Я для вывода видео использую плагин Video Embedder. Нормально работает. У меня есть два вопроса. Можно ли сделать так, что бы при заходе на Блог музыка включалась автоматом? И еще, нужно ли закрывать плеер от индексации?

    • Александр, Это сделать не тяжело, можно найти html код плеера с автовключением и воткнуть его в футер. А по поводу плеера — думаю, что нет смысла. По крайней мере я не заморачивался по этому поводу 🙂

  17. А как сделать так, чтобы использовать несколько заставок для плеера?

  18. Ответить

    А этот плеер не сильно нагружает сайт?

    • Этот плеер загружает страницу на которой установлен примерно как два-три средних изображения! То есть практически не несет никакой нагрузки.

  19. Подскажите, пожалуйста, как должен выглядеть путь к файлу плеера и путь к файлу стиля? И ещё, о каких настройках идёт речь в фразе: «И в настройках прописываем следующее»? За ранее спасибо =)

  20. что я не нашёл где там можно скачать этот плеер уже сделанный

  21. Ответить

    Материал про вставку плеера может быть полезен, возможно начну аудио материалы выкладывать или вставлять в посты. Вот плагин, это не очень хорошо. :mrgreen:

  22. Ответить

    Вопрос на засыпку. Я скопировал значок музыкального файла с жёсткого диска в библиотеку медиафайлов сайта и вставил в статью . Там отразилось название файла в виде гиперссылки. Играет без всякого плеера. Мне непонятно, эта ссылка — на библиотеку медиафайлов, которая на сайте (это было бы прекрасно), или на жёсткий диск (тогда на другом компьютере она звучать не будет).

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

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

    Буду признателен за комментарий и советы (с уведомлением на e-mail или прямо туда). Спасибо.

  23. Ответить

    Это очень здорово, и интересно для посетителей, если на сайте есть ещё и плеер. Гости подольше задержатся на таком сайте — улучшатся поведенческие факторы, опять же — плюс. Буду и себе устанавливать.

  24. Ответить

    У меня есть специальный плагин, работающий с этим сервисом, но так как там надо его настраивать, а времени у меня на это нет, плеер так и не был применён. Естественно плагин был создан для использования в MaxSite CMS.

    • Ответить

      Прошёл год. Где-то 10 месяцев назад поставил и настроил этот плагин — теперь доволен. 🙂

  25. Ответить

    А че себе не поставил если все так просто?

  26. Спасибо! Все ясно, как день!