Вопрос поиска хорошего flash-плеера с HTML-интерфейсом занимал и занимает многих. Только на хабре можно найти немало статей на похожую тему. Так сложилось, что для своих нужд я использовал Flowplayer с плагином Controlbar с официального сайта. И все же чего-то не хватало…
Однажды пришло решение – использовать удобство тем jQuery UI для стилизации элементов управления. Было очевидно, что писать плагин придется самому. Увидеть, что из этого получилось можно под катом.
Плагин juifp (легко запомнить: Jquery UI FlowPlayer) при подключении к flowplayer'у создает в указанном контейнере элементы управления плеером на HTML.
$f().juifp(container, [options])
// Например
$f().juifp('div#juifp-container', {
height: 30,
showMute: false
})Таким образом флеш-элемент можно скрыть и использовать для управления проигрыванием только HTML-элементы.
При написании плагина я ориентировался на проигрывание mp3, но надо отметить, что все справедливо и для видео. Разве что кнопку fullscreen добавить…
Пример вида плеера при использовании настроек по-умолчанию:
Почему flowplayer?
Стиль кода используемого командой flowplayer’a во многом похож на jQuery, что лично для меня является весьма удобным. Так же flowplayer довольно хорошо документирован. Ну и вообще – на него я наткнулся, когда нашел другую разработку этой команды – jQuery tools – и мне эти инструменты сильно понравились. )
Почему jQuery UI?
Команда jQuery UI на мой взгляд проделала огромную работу создав много отличных инструментов и используя для них единые темы. Учитывая это, а также популярность jQuery вообще – было решено основываться именно на темах jQuery UI. Да, о возможности легко создать свою тему, совместимую с jQuery UI, тоже забывать не стоит.
Javascript-плагин для flowplayer
Я решил не останавливаться подробно на написании javascript-плагина. На это есть неплохая справка на офф.сайте. И потом, все это можно будет увидеть на моем примере. (Кстати, надо заметить, что вообще вся информация на офф.сайте плеера довольно полно и понятно представлена.)
Итак?
Сам плагин размещается в файле juifp-1.0.source.js
Лучше всего смотреть демо в браузере FireFox, так как в этом случае будет доступен инструмент jQuery UI ThemeRoller. С его помощью можно сразу оценить – как смена темы отражается на внешнем виде плагина
Рабочее демо тут
Пока все смотрят, приведу краткую информацию.
Возможные опции (в примере ниже представлены значения по-умолчанию):
// Кнопки управленния. Можно располагать в любом порядке или не выводить вообще
// (все на совести здавого смысла, так как кнопку play можно тоже не выводить)
controls: [
'seek-prev',
'stop',
'play',
'seek-next'
],
// Описания для кнопок (значения атрибута title)
buttonsTitle: {
play: 'Play',
stop: 'Stop',
pause: 'Pause',
prev: 'Prev',
next: 'Next',
mute: 'Mute',
unmute: 'Unmute'
},
// При значении true для всех элементов будет добавлен класс ui-corner-all
// При false - скругленным будет только ползунок регулятора громкости
roundCorners: true,
// Показывать или нет кнопку Mute
showMute: true,
// Показывать или нет регулятор громкости
showVolumebar: true,
// Значения громкости по-умолчанию (0-100)
defaultVolume: 50,
// Ширина тайм-линии в пикселях. Минимальное значение - 150
progressbarWidth: 300,
// Ширина регулятора громкости в пикселях. Минимальное значение - 50
volumebarWidth: 100,
// Отступ для всех элементов. При 0 - все элементы будут вплотную друг к другу
elementsMargin: 1,
// Высота в пикселях. Минимальное значение - 16
height: 26
Используя опции можно добиться вида плагина от такого
до, например, такого
Минимальный код для подключения плагина со значениями по-умолчанию
$f().juifp(container);Где container – селектор для элемента, в котором необходимо разместить плагин.
Надо иметь ввиду
1. Кнопки Next и Prev пока не выполняют никаких действий.
2. Вполне возможно возникнет вопрос о выводе имени файла внутри плеера. Я долго колебался — размещать-ли название песни/файла внутри тайм-линии, слева от таймера. После некоторых опытов — решил не размещать. Хотя элемент juifp-timeline-text остался на всякий случай — путь он не вводит вас в заблуждение.
3. Учитывая, что изначально плагин писался для себя – не было необходимости использовать только нативный javascript для максимального удобства разработки. Поэтому в данный момент плагин требует подключения jQuery и следующих jQuery UI библиотек:
- jquery.ui.core
- jquery.ui.widget
- jquery.ui.mouse
- jquery.ui.slider
Рассматривается необходимость переписать все на чистом javascript.
Пока на этом всё. Буду рад любым комментариям.
Последнюю версию плагина всегда можно найти тут
В ролях:
