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

Я уже писал про скрипт 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"); // В этот момент плагин еще не готов
});

Демо можно найти тут.