Адаптивный шаблон для проигрывателя jPlayer

Проигрыватель jPlayer позволяет производить аудио и видео файлы в различных форматах и в различных браузерах. Работает данный плеер на библиотеке jQuery или Zepto

В этой заметке представлена адаптивная тема оформления этого плеера, с использованием Font Awesome

Немного о самом плеере:

Поддерживаемые платформы и браузеры:

  • Windows: Chrome, Firefox, Internet Explorer, Safari, Opera
  • OSX: Safari, Firefox, Chrome, Opera
  • iOS: Mobile Safari: iPad, iPhone, iPod Touch
  • Android: Android 2.3 Browser
  • Blackberry: OS 7 Phone Browser, PlayBook Browser

Поддерживаемые форматы:

  • HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
  • Flash: mp3, mp4 (AAC/H.264), rtmp, flv

Более подробно ознакомится с плеером, а также скачать его, можно на сайте автора: www.jplayer.org

Теперь о шаблоне:

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

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

Для блока размером 450-700 точек:

Для блока размером менее 450 точек:

Подключение плеера и шаблона:

1. Подключаем шрифт Font Awesome, библиотеку jQuery, скрипт плеера jPlayer и, при необходимости использования плейлистов, скрипт jPlayer Playlist:

2. Подключаем стиль для плеера:

3. В зависимости от желаемого результата, добавляем JS и HTML коды:

Одиночный аудио файл:
Аудио файлы с плейлистом:
Одиночный видео файл:
Видео файлы с плейлистом:

jPlayer на github
Сайт плагина: www.jplayer.org

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Роман:

    Всем привет! Блин хочу выдрать функцию повтора (repeat) из примеров, как это сделать? Не вижу в скриптах нужной функции которая бы включала/отключала повтор трека, как в примерах

    Ответить
  • Alexander:

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

    Что касается скрина

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

    Дайте лучше ссылку на сайт

    Ответить
    • Серый:

      Привет
      вот ссылка на сайт
      http://archive-5000.cf
      пробую но не получается сделать как надо .

      Ответить
    • Серый:

      Поменял шаблон
      Скрин
      http://prntscr.com/o2wg0d
      Нормально появился
      Наверно в стилях шаблона был косячок.
      Пока теперь вопросов нет.
      спасибо за плеер

      Ответить
  • Сергей:

    Александр, моя ошибка была в нумерации контейнеров. После исправления у меня всё работает идеально. Можно посмотреть на
    http://www.webslivki.com/ustap42.html

    Если Вам интересно, то я могу поставить Вашу рекламу на
    http://www.webslivki.com, скиньте на мой мейл код.

    Ещё раз — большое спасибо,
    Сергей

    Ответить
  • Сергей:

    Во-первых, большое спасибо, Александр! Редкий случай в сети, когда отлично написано.
    А вопрос такой — Вы не рассматриваете варианта расположения на одной странице двух и более видеоплееров на jplayer? Или это в принципе невозможно?
    Всего Вам доброго!

    Ответить
    • Alexander:

      Возможно, но нужно ли ?
      Если у вас такая медиатека, я думаю можно найти вариант получше и посовременнее.

      Ответить
      • Сергей:

        Ещё как нужно! Идёт экран, потом рассказ о следующем ролике, потом опять экран и т.д. Я бы купил даже

        Ответить
        • Alexander:

          Я может что то не так понял
          На этой странице 2 видео плеера. и еще 2 аудио.

          Ответить
          • Сергей:

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

            Ответить
            • cfyz:

              Присмотритесь, в каждом есть :

              jquery_jplayer_номер

              Ответить
              • Сергей:

                Да пробовал так уже. Два блока на одной странице — в одном jquery_jplayer_4 в другом jquery_jplayer_5. И в HTML и в скрипте. Что-то показывает, но барахлит нещадно. Можно, конечно, каждый плеер в своём всплывающем окне — так работает, но я бы хотел, чтобы можно было просто несколько на одной странице. А вообще плеер классный, другого и не надо.

            • Alexander:

              https://atuin.ru/blog/sbornik-reshenij-i-funkcij-na-jquery/
              пауза тут
              если я правильно понял ….

              Ответить
            • Alexander:

              Дайте ссылку на страницу, где не работает.
              Я завтра погляжу

              Ответить
              • Сергей:

                http://www.webslivki.com/v4.html

                С наступающим Новым годом!!!

              • Alexander:

                Вас тоже с наступающим!
                1 — У вас таки напутаны ID, в пятом плеере стоит #jp_container_4
                2 — Видео с гугла, работает как то странно, лучше бы его скачатьк себе. (как в примере)
                3 — Ваше видео klip1.mp4 вообще не доступно.
                4 — Ну еще нужно покрутить что то со стилями, если мы добавим:
                .jp-jplayer {
                border:1px solid #000;
                }

                Вы увидите, что контейнер для видео больше самого видео, и соотв. клик по пустому месту на него действует.
                Добавил в пример видео с jplayer и все работает правильно:
                http://test.atuin.ru/test/book.html

  • Mayson:

    Спасибо Вам большое за статью, взял в оборот!

    Ответить
  • Danil:

    Как различить html и JS если они слепленны?

    Ответить
    • Alexander:

      Различить то их просто (скрипты красным даже выделены), а слеплены они потому что на JS стоят все данные файлов.
      Если у вас какая то статика, то их можно вынести в отдельный файл, но не когда это все встраивается в какой то шаблон CMS (с последующим добавлением, изменением и удалением файлов).

      Ответить