В этом уроке мы создадим видеоплеер из набора элементов пользовательского интерфейса «Impressionist UI» Владимира Кудинова. Для оформления мы будем использовать CSS3, а для реализации функциональности —
MediaElement.js.
MediaElement.js это HTML5 аудио и видео плеер, который также работает в старых браузерах имитируя
MediaElement HTML5 API с помощью Flash и Silverlight.
ДЕМО
Исходные файлы
Jquery.waypoints это плагин для реализации движения объектов по набору точек, так называемым вейпоинтам, с заданной скоростью и другими параметрами, физически имитирующие реалистичность. Частичное описание алгоритма было описано
тут.
В ходе разработки текущего энтерпрайз-проекта, понадобилось реализовать отложенную обработку коллекции элементов jQuery — имелся набор виджетов, содержимое которых нужно было загрузить по очереди, причем загрузка происходила асинхронно. Пришлось написать небольшое расширение к
$.fn —
eachDeferred.
Сегодня мы будем рассматривать реализацию движения игрока по точкам — так называемым вейпоинтам (waypoints) в режиме 2D — а именно вид сверху.
![[скриншот]](http://habrastorage.org/storage2/590/c1e/8e5/590c1e8e5e666d22bce032b39c5da5f9.jpg)
Стал известен скрипт
lake.js — плагин jQuery, который берёт иллюстрацию
(элемент <img>) и помещает её на холст (вставляет элемент
<canvas>), располагая сразу под нею зеркальное отражение, идущее волнами — будто в воде озера.
Речь идёт не о застывших волнах, а об идущих по воде волнах — их фаза динамически изменяется джаваскриптом. (Понятно, что на Хабрахабре этот эффект не воспроизводим, так что я вставляю статический скриншот.)
Холст имеет ту же ширину, что и обрабатываемая иллюстрация, и вдвое бóльшую высоту.
Вызов плагина выглядит сравнительно просто и самоочевидно:
<script src="jquery.js"></script>
<script src="lake.js"></script>
<script>
$(function() {
$('#lake-img').lake({
'speed': 1,
'scale': 0.5,
'waves': 10
});
});
</script>
...
<img id="lake-img" src="lake.png" style="display: none;"/>
Делюсь с аудиторий написанным накануне
небольшим плагином, который может оказаться полезным и вам. К описанию на гитхабе добавить нечего, поэтому я его просто перескажу.
Плагин позволяет передавать команды манипуляции ДОМом в одном объекте, то есть заменить много вызовов методов одним вызовом функции.
Использование
$.executeObject({"#my_div": ["text", "новый текст"]}) // можно передать объект
$.executeObject('{"#my_div": ["text", "новый текст"]}') // а можно и JSON
Чем дальше в лес, тем толще партизаны. Нет, не так. Чем старше веб, тем больше джаваскрипта
Клиентского кода в веб-приложениях с каждым годом действительно становится все больше. Подчас это десятки файлов с сотнями функций. И что делать, когда нам нужно поменять код, выполняемый по событию (например, клик по ссылке). Как его найти? Задавшись решением этой задачи, я придумал несколько разных вариантов. Каждый из них имеет свои плюсы и минусы. И в конце статьи я предлагаю метод, который мне кажется оптимальным.
27 апреля 2012, 00:01
501
Привет, любители .тостов!
Вместе с вами мы с нетерпением ждем наступления пятницы 25-го мая, когда на одной сцене сойдутся одни из лучших javascript-ориентированных программистов со своими мыслями о настоящем и будущем.
А пока остается почти месяц до
события, которое мы стремимся сделать лучшим кодо-ориентированным событием до летних каникул — продолжим знакомиться со спикерами
.тостер {javascript}.
Знакомьтесь: миловидный мужчина в правой части фотографии — Ральф Уитбэк, со-автор подкаста Official jQuery и senior developer в компании appendTo, по-совместительству — участник jQuery Foundation. Здесь опубликованы наиболее интересные отрывки нашего разговора с Ральфом о технологиях, работе и разработке:
На проектах использую
Twitter Bootstrap и
jQuery UI для прототипирования интерфейсов различных элементов страниц в т.ч. форм.
На днях понадобилось дополнить форму одним полем. Был выбран наиболее подходящий формат, в виде набора переключателей (элемент input, тип radio).
В Twitter Bootstrap, набор переключателей представлен в виде
набора кнопок и не работает напрямую с элементом input, что предполагает написание дополнительного кода для обработки событий. Библиотека jQuery UI, имеет решение
подобной задачи, и вся обработка событий уже реализована.
25 апреля 2012, 14:12
235
Как известно, youtube является крупнейшим видеохостингом в мире.
Помимо прочего, здесь хранится как огромное музыкальных клипов, так и просто песен. Дело в том, что ютуб очень часто используют и как хостинг для аудио композиций, видимо потому что в интернете не существует специализированного аудиохостинга. Таким образом возникла идея сделать аудио плеер на основе музыкальных роликов из ютуба…