All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок

Всё для компа

chat

Видео дня

Популярное

Реклама

Хочешь помочь проекту? Установи наш баннер!

Партнёры



Развлекательный портал по игре Dota 2. У нас вы первым узнаете о последних игровых новостях, сможете почитать интересные статьи и гайды, посмотреть стримы популярных комментаторов и многое другое.

Про-софт - сайт професионального софта. Ето сайт не только софта но также игровых дополнений, музыки, фильмов, игр для ПК а также читов для ПК игр. Постоянное обновление материалов и каждый день появляется чтото новенькое!

Авторизация


Реклама

Хочешь помочь проекту? Установи наш баннер!

Опрос

Какую поисковую систему используете?

1. Яndex
2. Google
3. Rambler
4. Nigma
5. Другое
6. Mail
7. Yahoo!

Реклама

Хочешь помочь проекту? Установи наш баннер!

Популярные тэги

Комментарии

Счетчики

На сайте: 1
Прохожие: 1
Пользователей: 0
Статус:

Счётчик тИЦ и PR Rambler's Top100
HTML и DHTML [2] JavaScript [5]
Mootools [2] JQuery [22]
Разное [2] CSS [4]
PHP [1]
АвторАвтор: leonP4 | ДатаДата: 02.02.2011 |Голосов: 0


Ранее на хабре уже писали про скрипт 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+



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



Подключаем на страницу:

Code
<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:

Code
$(document).ready(function() {
  $("#jpId").jPlayer( {
  ready: function () {
  $(this).jPlayer("setMedia", {
  mp3: "../mp3/elvis.mp3"  
  });
  }
  });
});

Разнообразим форматы:

Code
$(document).ready(function() {
  $("#jpId").jPlayer( {
  ready: function () {
  $(this).jPlayer("setMedia", {
  m4a: "mp3/elvis.m4a",
  oga: "ogg/elvis.ogg"
  });
  },
  supplied: "m4a, oga",
  swfPath: "/jPlayer/js"
  });
});

Теперь видео:

Code
$(function() {  
  $("#jpId").jPlayer( {
  ready: function () {
  $(this).jPlayer("setMedia", {
  m4v: "http://www.myDomain.com/myVideo.m4v"  
  }).jPlayer("play");
  },
  supplied: "m4v",
  swfPath: "jPlayer/js"
  });
});

Пример с разными видео форматами:

Code
$(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"
  });
});

А вот так не пишем никогда:

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


Теги к статье:

| : jQuery, jPlayer
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Всего комментариев: 1
Комментариев: 1
Имя: Леонид

0  
Сообщение № 1 Написал: Леонид (21.02.2011)

(leonP4) | 21.02.2011 | Понедельник|21:32
Отличная статья, HTML5 просто супер, теперь можно гораздо легче прикручивать фишки плеерам без знания flash'а

 -------------- Комментарий --------------
Загрузка…
  Цитировать  
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Популярные файлыНовые файлы
Call of Duty 5: World at ...[ Скачали 67375 раз ]
Амфибии, Гайд по ассасина...[ Скачали 31758 раз ]
Амфибии, Гайд по шаманам.[ Скачали 30663 раз ]
cs 1.6 patch v48 full[ Скачали 29045 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17192 раз ]
Огромный пак глюков и баг...[ Скачали 12743 раз ]
civilization 5 скачать бе...[ Скачали 11941 раз ]
PW MP5[ Скачали 11147 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 10403 раз ]
Niko Bellic (нико белич) ...[ Скачали 10005 раз ]
Inkbound (2024/En/MULTI/R...[ Добавлен 13.04.2024 ]
The Planet Crafter (2024/...[ Добавлен 13.04.2024 ]
My Life: Farm Vet (2024/R...[ Добавлен 12.04.2024 ]
Headquarters: World War I...[ Добавлен 12.04.2024 ]
Ereban: Shadow Legacy (20...[ Добавлен 11.04.2024 ]
Broken Roads (2024/Ru/En/...[ Добавлен 11.04.2024 ]
Wallpapers Girls №1042[ Добавлен 11.04.2024 ]
Children of the Sun (2024...[ Добавлен 09.04.2024 ]
Wallpapers Girls №1041[ Добавлен 09.04.2024 ]
Wallpapers Girls №1040[ Добавлен 08.04.2024 ]