Пользователь
0,1
рейтинг
29 января 2011 в 13:41

Разработка → 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"); // В этот момент плагин еще не готов
});

Демо можно найти тут.
Андрей Ребров @mythmaker
карма
153,0
рейтинг 0,1
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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
    Тока вчера его как раз нашёл, подумал, что буду применять… Сегодня эта статья на хабре… Хабр читает мои мысли??? :)
    • +4
  • +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
          А можете поделится вашим допиленным вариантом?
          • 0
            Как раз пишу статью, хороший повод поделиться.
          • +2
            habrahabr.ru/blogs/php/112809/ на здоровье :)
  • 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
      Вот их бы совместить…
  • 0
    Хороший плеер, но не хватает функции «fullscreen»
  • 0
    Плеер неплохой, однако как показал личный опыт — нету еще ни одной готовой наработки проигрывателя, которая полностью бы удовлетворяла весь тот функционал, который мне нужен. Либо много неотключающихся наворотов, либо неизменяемый дизайн, либо еще что-то.
  • +1
    Типичная ошибка всех подобных плееров — работа от JS-, а не от HTML-кода. Т.е. на принцип обратной совместимости просто наплевали.
    • 0
      Это не ошибка, имхо, а необходимость. Конечно правильнее будет встроить в HTML код тег <audio> и уже вокруг него навернуть «красоту», но это вызовет сложности с IE, для которого по-прежнему надо вставлять флешку.

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

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