jPlayer — плагин для проигрывания аудио и видео

    imageЯ уже писал про скрипт audio.js, позволяющий проигрывать аудио файлы использую возможности html5 и flash. Пост был встречен хорошо, поэтому сейчас я хочу рассказать про jPlayer — jQuery плагин для проигрывания аудио и видео.

    Поддержка форматов:
    • HTML5: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm
    • Flash: mp3, m4a (AAC), m4v (H.264)


    Поддерживает следующие браузеры:
    • Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9 beta
    • OSX: Firefox, Chrome, Opera, Safari
    • iOS: Mobile Safari: iPad, iPhone, iPod Touch
    • Android: создатели не нашли девайс для тестирования

    Работает на jQuery 1.3.2+

    Несколько примеров кода.

    Подключаем на страницу:
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
      </script>
      <script type="text/javascript" src="js/jquery.jplayer.min.js">
      </script>
      <script>
        $(document).ready(function() { /* Код тут */ });
      </script>
    </head>
    <body>
      <div id="jpId"></div>
    </body>
    

    Проигрываем mp3:
    $(document).ready(function() {
      $("#jpId").jPlayer( {
        ready: function () {
          $(this).jPlayer("setMedia", {
            mp3: "../mp3/elvis.mp3" 
          });
        }
      });
    });
    

    Разнообразим форматы:
    $(document).ready(function() {
      $("#jpId").jPlayer( {
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4a: "mp3/elvis.m4a",
            oga: "ogg/elvis.ogg"
          });
        },
        supplied: "m4a, oga",
        swfPath: "/jPlayer/js"
      });
    });
    

    Теперь видео:
    $(function() { 
      $("#jpId").jPlayer( {
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4v: "http://www.myDomain.com/myVideo.m4v" 
          }).jPlayer("play");
        },
        supplied: "m4v",
        swfPath: "jPlayer/js"
      });
    });
    

    Пример с разными видео форматами:
    $(function() { // executed when $(document).ready()
      $("#jpId").jPlayer( {
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4v: "/media/myVideo.m4v", 
            ogv: "/media/myVideo.ogv" 
          }).jPlayer("play"); //Включаем авто старт
        },
        solution: "flash, html", 
        supplied: "m4v, ogv",
        swfPath: "/scripts"
      });
    });
    

    А вот так не пишем никогда:
    $(document).ready(function() {
      $("#jpId").jPlayer( {
        ready: function () {
          $(this).jPlayer("setMedia", {
            mp3: "elvis.mp3"
          });
        }
      });
      $("#jpId").jPlayer("play"); // В этот момент плагин еще не готов
    });
    

    Демо можно найти тут.
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 43
    • +2
      >> Android: не нашли девайс для тестирования

      на Android 2.2, при попытке просмотра видео, ничего кроме чёрного прямоугольника я не увидел, аудио также не заиграло.
      • +1
        На moto milestone 2 все работает.
        • +1
          у меня работает. Galaxy s 2.2. Вы на чём пробовали?
          • 0
            стандартный браузер
            • 0
              Флэш установлен кстати? А вдруг оно как-то влияет.
          • 0
            htc gratia, дефолтный браузер «из коробки» Android 2.2 — ни звук, ни видео не работают
            • 0
              оно не для мобилок все равно
          • +3
            годный плеер. уже использовала его в двух проектах. работает очень шустро
            • –7
              Тока вчера его как раз нашёл, подумал, что буду применять… Сегодня эта статья на хабре… Хабр читает мои мысли??? :)
            • +1
              на айпаде протестировал, работает!
              может теперь получится сделать для себя онлайн просмотр видео :)
              • +2
                Есть вот ещё прекрасный вроде: mediaelementjs.com/
                • 0
                  Буквально на днях перебирал с десяток HTML5/Flash плееров. Тоже остановился на mediaelementjs. Но и сабж нужно будет потестить… Описание заинтересовало.
                • 0
                  Звук регулируется неудобно, сделали бы как тут wpaudioplayer.com/
                  • 0
                    linux opensuse 11.4m6 x86 firefox 4.0b10
                    трейлер показал успешно
                    правда почемуто «зациклил» — не остановился в конце проигрывания
                    • 0
                      PS все три демки прошли успешно
                      что примечательно нагрузка на проц была заметно ниже флешплееров
                    • 0
                      А как же забыли про soundmanager 2? По моему сейчас самый зрелый продукт такого рода на рынке, да и крупные игроки вроде last.fm и soundcloud его используют.
                      • 0
                        Хотелось бы чтоб сие чудо субтитры поддерживало. In the future Properties may one day include: stream, chapters, subtitles.
                        • 0
                          Kubuntu Natty Narwhal 11.04 x86:
                          FireFox 4.0b10 — пару раз «залип» на 1 секунду, при просмотре видео
                          Chromium 8.0.552.237 (70801) — всё отлично проигрывается, только нужно было доставить пакет chromium-codecs-ffmpeg-nonfree
                          Rekonq 0.6.1 — видео нету, звук есть (странно, ведь он WebKit использует)
                          • 0
                            Пользовался SoundManager2. Но боюсь перейду на этот :)
                            • 0
                              Недавно в проекте использовал soundmanager2.
                              Впечатления, если честно, так себе. Но на тот момент ничего более подходящего не нашел.
                              Да и подкупило меня, что саундменеджером пользуются на таких солидных сайтах, как last.fm или soundcloud
                            • 0
                              Использовал яховский аудиоплеер mediaplayer.yahoo.com/
                              Но думаю сегодня же перейду на этот :)
                              • 0
                                А как у него с проигрыванием тяжелого контента — HD видео 720р?
                                А то видео демка на сайте авторов очень скромного качества.
                                • 0
                                  Годно.
                                  «В избранное. Немедленно в избранное!» (с)
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • 0
                                      Linux Mint. Свежий хром. Не работает. Картинка есть. При нажатии PLAY тишина
                                      • 0
                                        Использую у себя на сайте — dis.dj/news/seamless.html, это не реклама, просто плеер хороший, а я много перепробовал :).
                                        • +1
                                          Очень понравилось, хорош =)
                                          • 0
                                            Ак ак вы получаете изображение waveform трека?
                                            • 0
                                              Нагуглил статью andrewfreiday.com/2010/04/29/generating-mp3-waveforms-with-php/ — вкратце, скрипт перегоняет mp3 в wav, затем уже из вавника забирает амплитуды и сжимает полученную картинку под размер.

                                              Я слегка видоизменил оригинальный скрипт, чтоб можно было запускать из консоли, а также чтобы была «инверсия» — фон непрозрачный, а внутренность (сам waveform) — прозрачная, для отображения загрузки. Очень удобно через батник запускать «wave.bat file.mp3», который вызывает php скрипт, и получать на выходе PNG рядом с файлом под тем же именем.
                                        • 0
                                          Раньше юзал для подобного плагин jQuery Media Plugin
                                          Supported Media Players:
                                          — Flash
                                          — Quicktime
                                          — Real Player
                                          — Silverlight
                                          — Windows Media Player
                                          — iframe

                                          Supported Media Formats:
                                          Any types supported by the above players, such as:
                                          Video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp
                                          Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma
                                          Other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml
                                        • 0
                                          Хороший плеер, но не хватает функции «fullscreen»
                                          • 0
                                            Плеер неплохой, однако как показал личный опыт — нету еще ни одной готовой наработки проигрывателя, которая полностью бы удовлетворяла весь тот функционал, который мне нужен. Либо много неотключающихся наворотов, либо неизменяемый дизайн, либо еще что-то.
                                            • +1
                                              Типичная ошибка всех подобных плееров — работа от JS-, а не от HTML-кода. Т.е. на принцип обратной совместимости просто наплевали.
                                              • 0
                                                Это не ошибка, имхо, а необходимость. Конечно правильнее будет встроить в HTML код тег <audio> и уже вокруг него навернуть «красоту», но это вызовет сложности с IE, для которого по-прежнему надо вставлять флешку.

                                                Я проверил, по-идее, ничто не должно мешать взамен неотрендеренного тега поставить свою обертку, т.к. IE8 по преженму смог дотянуться до атрибутов, т.е. все необходимые данные у него будут.
                                              • 0
                                                …Только он как будто с mp3 не работает нигде, кроме Chrome… По идее, должен через Flash, но не работает — Firefox 4, Opera 11, IE 8.
                                                • 0
                                                  Android: создатели не нашли девайс для тестирования
                                                • 0
                                                  Жук – Jukebox, имхо, хорош и скинами, и тем, что запоминает место, на котором последний раз остановились.
                                                  Инетресно, есть ли у сабжа (jPlayer) Auto Resume?

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