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