- Сообщения
- 1 858
- Реакции
- 396
- Баллы
- 103
Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.
Плеер будет поддерживать следующие функции:
С помощью функции "checknav" нужно проверять величину прокрутки окна, в зависимости от чего добавлять CSS класс или удалять его. Переменные ds_loaded.sc и ds_loaded.sback нужны для предотвращения циклического запуска кода, который может быть и не таким простым, например можно добавить функции jQuery анимации.
Структура меню может быть любой, с учетом его горизонтального расположения, для примера возьмём стандартную разметку меню из Joomla 2.5:
плагин правильно подключится дважды, как на изображении. В плагин jQuery мы передаём два параметра первый - наименование функции (init) содержащейся в плаигне, второй объект, содержащий опции плагина ({file:'250_m',t:'m'}). Где file имя файла, t - тип плеера, он может быть розовым (w) или синим (m). Сразу скажу, все графические элементы плеера свободны для использования и распространения, да и плеер распространяется на лицензии GNU GPL 2. То есть у Вас есть всеобъёмлющий набор прав по распоряжению исходными материалами плеера.
Для его работы ипользуется следующя hrml разметка::
Итак, с чего начать, во-первых, чтобы все было понятно, - с того, что в плеере будут содержаться различные вычисления, касающиеся обработки пакетных данных, так как файлы, загружаемые в тег audio загружаются в браузер пользователя порциями или пакетами, точнее в буфер браузера.
Для начала не забудьте подключить jQuery! Затем пишите плагин внутри обработчика события загрузки страницы:
Любой плагин jQuery расширяет его, для это есть стандартная функция jQuery $.fn.extend:
Содержимое $.fn.extend для нашего плагина будет следующим:
Плеер будет поддерживать следующие функции:
- перемотка
- старт/стоп
- пауза
- индикатор оставшегося времени
- индикатор загрузки файла
HTML:
/* Добавление классов для подсветки кода */
<form action="index.php" method="POST">
<div class="conteinerofplayer">
<div class="player m">
<div class="playbut_m">
</div>
<div class="bar">
<div class="progress_m">
<span></span>
<div class="line_m">
</div>
</div>
<div class="tracktime">
<span></span>
</div>
</div>
<div class="radionoactive_m radio_m">
</div>
</div>
<div class="player w">
<div class="playbut_w">
</div>
<div class="bar">
<div class="progress_w">
<span></span>
<div class="line_w">
</div>
</div>
<div class="tracktime">
<span></span>
</div>
</div>
<div class="radionoactive_w radio_w">
</div>
</div>
<!--
<div class="player m2">
<div class="playbut_m">
</div>
<div class="bar">
<div class="progress_m">
<span></span>
<div class="line_m">
</div>
</div>
<div class="tracktime">
<span></span>
</div>
</div>
<div class="radionoactive_m radio_m">
</div>
</div>
-->
</div>
<input type="submit" value="submit">
</form>Структура меню может быть любой, с учетом его горизонтального расположения, для примера возьмём стандартную разметку меню из Joomla 2.5:
Код:
$('.m').audioplayer('init',{file:'audio/250_m',t:'m'});
$('.w').audioplayer('init',{file:'audio/250_w',t:'w'});Для его работы ипользуется следующя hrml разметка::
HTML:
<form action="index.php" method="POST">
<div class="conteinerofplayer">
<div class="player m">
<div class="playbut_m">
</div>
<div class="bar">
<div class="progress_m">
<span></span>
<div class="line_m">
</div>
</div>
<div class="tracktime">
<span></span>
</div>
</div>
<div class="radionoactive_m radio_m">
</div>
</div>
<div class="player w">
<div class="playbut_w">
</div>
<div class="bar">
<div class="progress_w">
<span></span>
<div class="line_w">
</div>
</div>
<div class="tracktime">
<span></span>
</div>
</div>
<div class="radionoactive_w radio_w">
</div>
</div>
<!--
<div class="player m2">
<div class="playbut_m">
</div>
<div class="bar">
<div class="progress_m">
<span></span>
<div class="line_m">
</div>
</div>
<div class="tracktime">
<span></span>
</div>
</div>
<div class="radionoactive_m radio_m">
</div>
</div>
-->
</div>
<input type="submit" value="submit">
</form>Для начала не забудьте подключить jQuery! Затем пишите плагин внутри обработчика события загрузки страницы:
Код:
;(function($) {
.......
})(jQuery);
Код:
$.fn.extend({
});
Код:
audioplayer: function(arg,options) {
if (options && typeof(options) == 'object') {
options = $.extend( {}, $.audioplayer.defaults, options );
} else {
options = $.audioplayer.defaults;
}
// this creates a plugin for each element in
// the selector or runs the function once per
// selector. To have it do so for just the
// first element (once), return false after
// creating the plugin to stop the each iteration
this.each(function() {
new $.audioplayer(this, options, arg );
});
return;
}