HTML5+CSS3 плеер
Уже второй день я собираюсь написать этот пост, но постоянно мешают какие-то внешние факторы типа нежданного дневного сна или шквала работы.
Новые технологии грядут и это отрицать бессмысленно. Я отношу себя к тем людям, которые обеими руками голосуют за введение новшеств в повседневную жизнь. HTML5 и CSS3 уже долгое время ходят у всех на устах, интернет буквально взрывается от новых возможностей, которые предоставляют эти два языка. Ну и я решил хоть как-то шагать в ногу со временем и попрактиковаться в использовании новых функций.
Я уже писал статью про создание счётчика фолловеров, оформление которого базировалось полностью на CSS3. Да, я считаю, что можно положить половой орган на бедных пользователей, которые до сих пор сидят под убогим IE или не обновляют свои браузеры до современных версий. Да, я думаю, что сделать красиво с помощью простого кода — это правильнее, чем сделать тоже самое, но потратив бесценные килобайты на картинки.
Некоторое время почитав статьи про нововведения HTML5 я решил попрактиковаться в добавлении на страницу аудиозаписей с помощью встроенного тега <audio>.
Целью было создание странички с пятью композициями, управляемыми кнопочками, написанными на css3. Для тех, кто хочет сразу посмотреть на результат: http://player.kdmi.ru
Всё предельно просто и не требует каких-то фантастических знаний. Любая аудиозапись добавляется на страницу в виде:
<audio id="song1" src="simple.mp3" preload="none"></audio>
Параметр preload отвечает за предзагрузку файла. Его вы можете использовать когда вы уверены, что пользователь рано или поздно захочет прослушать вашу мелодию, ну и естественно если вам насрать на людей, которые серфят с ограниченным трафиком. ( особенно не рады будут пользователи GPRS, случайно заглянувшие на ваш сайт ). Параметр может принимать значения none, auto и metadata. none — запрещает предзагрузку файла (стоит по дефолту),a auto соответственно разрешает предзагрузку композиции.
Перейдём к управлению композицией. Добавив простой параметр controls к тегу <audio> вы включите стандартный интерфейс браузера, предназначенный для проигрывания аудиофайлов.
<audio src="witchitalineman.mp3" controls> </audio>
Но если вы хотите задать собственный интерфейс, пускай и не идеальный, но собственный — то вам достаточно привязать к нужным элементам действия для id аудиозаписи. Вот простой пример добавления композиции и управляющих текстовых блоков для неё.
<audio id="song1" src="1.mp3" preload="none"></audio>
<div onClick="document.getElementById('song1').play()"> Play </div>
<div onClick="document.getElementById('song1').pause()"> Pause </div>
<div onClick="document.getElementById('song1').volume += 0.1"> Volume Up </div>
<div onClick="document.getElementById('song1').volume -= 0.1"> Volume Down </div>
Ну оформление для кнопочек я прописал через CSS. Ничего нового не открыл. Всё те же закруглённые края, да тени. При желании можете сами изучить мои таблицы стилей.
И ещё раз ссылаюсь на результат моих экспериментов: http://player.kdmi.ru
Удачных вам внедрений новых технологий! =)
P.S. У меня тут недавно навернулась кроссбраузерность для Оперы. Так что все пользователи этой круглой красной буквы созерцают мой блог совершенно без шапки. Если знаете как поправить данный казус — прошу написать мне. Но этот инцидент натолкнул на планирование полного переписывания кода, дабы расставить всё по полочкам, сделать кроссбраузерным и оптимизированным для мобильных версий.
а вот и не работает. последний фф
Ответить
А ну да ) ФФ пока курит в сторонке и завидует нормальным браузерам.
Ответить
Тоже не работает. Опера 11.01 (1190)
Ответить
ну значит и в опере нет пока поддержки html5 =) думаю скоро введут )
Хорошая статья. Давно пора нам привыкнуть к уходу флэша, и вооружится новыми способностями html5 и css3. Посмотрел примеры, красиво вышло. ;)
Ответить
Рад, что понравилось =)
Ответить
Круто, все работает.
Ответить
здорово так, Тёма респектуэ
Ответить
Ого отлично, не знал что так просто можно выкладывать аудизаписи и т.д. Таким образом юзабилити сайта будет увеличено, очень удобно. Спасибо за материал, будем тестить!
Ответить
Надеюсь, что большинство проектов в ближайшем будущем пересядут на html5 =) ну и браузеры отставать не должны =)
Ответить
Не знаю, не знаю, я конечно тоже всеми руками за введение новых технологий, но полностью переходить на них тоже не стоит, всегда будут люди которые далеки от этого и пользуются допустим IE 6 версии) конечно же число их с каждым днем сокращается, но все же про них забывать не стоит. Потому и html5 и css3 еще не скоро станут обычной нормой.
P.S. доход от полностью кроссбраузерной темы, намного больше обычной;)
Ответить
ну, кстати, есть возможность подгружать для пользователей IE6 простой флеш плеер вместо html5 =) Про это я уже напишу как-нибудь позже =)
Ответить
Флешу давно пора на покой, но произойдет это отнюдь не сегодня. А на последнем фф действительно проблема.
Ответить
Круто,что ты уже осваиваешь новые языки!Так держать!=)
Ответить
надо двигаться вперёд ) стараюсь потихоньку…
Ответить
батя грит малаца, хорошо зделал
Ответить
5 баллов
Ответить
Спасибо =)
Ответить
Впечатляет!)
Ответить
жаль что очень многие современные дизайнеры никак не могут перейти на новый уровень.
а ты молодец.
Ответить
Спасибо =) Ну консерваторские мнения некоторых играют мне только на руку )
Ответить
за html5 и css3 — будущее!!!бомба просто!
Ответить
о да =) надеюсь оно скоро придёт =)
Кстати… мне тут подсказали, что у некоторых не воспроизводится песни только из-за того что они в формате .mp3 Как решить эту проблему я опишу в одной из следующих статей. =)
Ответить
Flash пока, что рулит, хотя и сдал web позиции… в частности Alchemy (C/С++ -> .swf) А за урок спасибо =)
Ответить
Флеш не у всех есть. Поэтому он не может быть чрезмерно актуальным.
Ответить