Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.


Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).

HTML5 для веб-дизайнеров

1. Краткая история языка разметки
2. Модель HTML5
3. Мультимедиа
4. Формы 2.0
5. Семантика
6. HTML5 и современные условия

В истории всемирной сети каждый очередной виток перехода на новый уровень развития начинался с какого-нибудь технологического нововведения. Когда в HTML добавился элемент img, это в корне изменило облик сети. Затем введение JavaScript сделало ее более динамичной и интерактивной. Чуть позже появился Ajax, что открыло возможности для создания в сети полноценных приложений.

Современные веб-стандарты настолько продвинуты, что сейчас можно создать почти что угодно, используя лишь возможности HTML, CSS и JavaScript. Почти что угодно.

В спецификациях этих стандартов все еще есть пробелы. Так, если вы хотите сваять страницу с текстом и картинками, вы вполне обойдетесь HTML и CSS. Но если вам нужно опубликовать аудио или видео, тут неизбежно придется обратиться к сторонним технологиям — Flash или Silverlight.

Эти технологии — «плагины», эдакие «затычки», заполняющие «дыры» в сети. Они делают относительно простой публикацию игр, фильмов и музыки онлайн, но они не открыты и принадлежат и контролируются частными компаниями. Да, тот же Flash — мощный инструмент, но его применения в какой-то мере схоже со сделкой со злыми силами: мы получаем новые, недоступные другим путем, возможности, но взамен теряем часть свой независимости.

HTML5 призван восполнить этот недостаток. В данный момент он вступает в прямую конкуренцию с собственническими технологиями, вроде Flash и Silverlight, и главное его преимущество в этой борьбе — ему не требуется плагины, так как его мультимедиа-возможности «вшиты» в браузеры.

На днях получил комментарий от Google по поводу того как кодировать Webm для Android и планируется ли делать какие-либо presets, чтобы видео игралось наверняка.

Вот что я получил в ответ:

Большинство текущих декодеров в Android реализованы программно и поэтому не справятся с воспроизведением HD видео.

Мы рекомендуем использовать обычный 360p preset, распространяемый с нашими патчами для ffmpeg.

Наши тесты показали, что 480p файлы воспроизводятся на некоторых девайсах. Как только у нас будут готовы 480p presets, мы, как обычно, их выложим.

Что за патчи имеют ввиду разработчики?

Так как в текущей реализации ffmpeg поддерживаются не все возможности libvpx, команда webm выкладывает патчи, добавляющие presets и полноценную поддержку библиотеки (маппинги команд кодировщика).

Последнюю версию патчей можно взять отсюда: http://code.google.com/p/webm/downloads/list

360p пресет, о котором шла речь выше, используется через параметр -vpre

ffmpeg -i "$inputFileName" -s 640x360 -vpre libvpx-360p -b 500k -acodec libvorbis -aq 2 -ac 2 -ar 44100 -f webm -threads 12 -y "$finalName"

Тег HTML5 video, уже поддерживается всеми основными браузерами.

Как видно из таблицы, текущие версии Firefox, Chrome и Opera поддерживают продвигаемый Google открытый WebM, а Safari (включая IOS версию) и IE проприетарный H.264, для остальных же браузеров можно использовать flash плеер, который умеет проигрывать тот же H.264, и таким образом для кроссбраузерности будет достаточно перекодировать видео в эти 2 формата.

В этой небольшой заметке я расскажу как перекодировать видео в эти самые форматы (этот вопрос освещён в интернете на удивление плохо) в VLC плеере и как использовать jPlayer для его кроссбраузерного воспроизведения.

В связи с некоторыми вычислениями на питоне (например, подсчётом коэффициента симметрии карты реликтового излучения) мне захотелось сделать процесс более наглядным. Ну хотя бы добавить прогресс-бар. Скучно, знаете ли, сидеть перед пустой консолью и втыкать на запущенную команду. То ли работает, то ли висит… с ходу не понять. А делать какой-нибудь лог исполнения не хочется, так как потом в полученом хаосе глаз теряется.

Requests — библиотека Python, которая элегантно и просто выполняет HTTP-запросы. Теперь не нужно осваивать urllib2 с излишне сложными программными интерфейсами.

Вот как выглядит HTTP-запрос с авторизацией с помощью requests:

>>> r = requests.get('https://api.github.com', auth=('user', 'pass'))
>>> r.status_code
200
>>> r.headers['content-type']
'application/json'

До недавних пор я думал, что единственный способ узнать о причине BSOD'а – это белые буковки на синем «экране смерти». Недавние события немного расширили мои познания в области диагностирования неполадок, и этими знаниями я хочу поделиться с вами, хабражители.
Случилась очередная поломка системы у очередного клиента. «Синий экран, и нечего не шевелится» — так описала проблему девушка, которая за компьютером работала. Дело было около 18 вечера, и ехать на выезд совсем не хотелось. Перезвонив клиенту, я сказал, что компьютер посмотрю удаленно, хотя сам понимал, что заниматься ним придется завтра. Тем не менее совесть не дала просто забыть о компе до завтра.

В данном обзоре я хочу показать как можно расширить возможности компонента Progressbar плагина jQuery UI. Для начала поставим перед собой задачи, которые мы и будем решать:

• прогресс-бар должен быть динамическим, т.е. «бежать вперед» (заполняться) с течением времени
• возможность задавать параметры «бега» бара
• удобство визуального использования. К примеру отображение текущего процента заполнения прогресс-бара

Остановимся подробнее на параметрах «бега». Бар можно параметризовать различными образами: задавая время запуска, шаг и период; время финиша, шаг и период; время старта, время финиша и шаг. Я остановился на последнем, т.е. для инициализации нашего прогресс-бара достаточно указать время старта, время финиша и шаг.

Представим, что у нас есть сайт, на который регулярно дают ссылки с хабра.
Нам нужно подготовить его к резким всплескам посещаемости. Как это сделать?

С версии 0.8.46 в nginx появились опции, позволяющие легко и просто настроить прозрачное кэширование для анонимных пользователей.

Для работы этой схемы от сайта требуется очень мало: достаточно лишь не начинать сессию, то есть не отправлять сессионную куку, без явной на то необходимости. Редкий сайт нельзя довести до такого состояния, а значит большинство сайтов можно защитить от резких всплесков посещаемости с помощью nginx с минимальными затратами сил и времени.

Эта статья о некоторых технических аспектах реализации бесплатного сервиса для загрузки, хранения и просмотра видео. Будут рассмотрены вопросы настройки серверного программного обеспечения, даны примеры команд для конвертации видео и примеры кода на языке PHP.

Как известно, при работе с фреймами для обеспечения безопасности браузеры не позволяют JavaScript-коду обращаться со страницы одного домена на страницу другого домена. В этой краткой статье мы рассмотрим аспекты кросс-доменной работы в JavaScript, опишем один из «хороших» частных случаев, а в конце — я надеюсь в хабракомментах получить ответы на оставшиеся вопросы.

UPD1: те, кто здесь впервые, — обязательно читайте комментарии к этой статье, в них очень много интересного накидали (как я и надеялся). Спасибо!

UPD2: найдено решение задачи авторесайза для всего, кроме Opera < 10.

UPD3: полностью кроссбраузерное решение задачи с ресайзом приводится ниже. Его особенности: а) не портится history, б) работает даже в Опере 7 и IE6, в) для ускорения работы высота фрейма всегда делается кратной N=30 пикселям. Фактически, там 2 алгоритма — для IE (через location.hash) и для «не-IE» (через window.name и «простукивание» возможных высот в цикле). См. также комментарии к статье, там разъяснения, почему так, а не иначе.

UPD4: статья начала принимать черты монументальной, посему она переехала ко мне в Наблы на dkLab: dklab.ru/chicken/nablas/58.html — там же все примеры кода самой последней актуальности. Но, конечно, в случае изменений я буду их и тут тоже анонсировать, добавляя UPD5, UPD6 и т.д.

audio.js — это javascript библиотека, позволяющая использовать HTML5 тэг повсюду. Что скрывается за словом «повсюду». Если есть возможность использовать тэг , то будет использоваться он, иначе будет подключен плеер на flash. В библиотеку так же входит и UI отображение для этого плеера, которое может быть видоизменено с помощью css.

Предисловие

Загрузка файлов всегда занимала особое место в веб-разработке.
О трудности оформления стилями <input type=file/> уже сказано немало, почитать об этом можно, например, по ссылкам раз, два, три, четыре, пять, шесть.
Но и сам процесс загрузки файлов нетривиален, есть много разных способов – и ни одного идеального.

Я уже писал о внедрении на нашем проекте Файлы@Mail.Ru silverlight-загрузчика полгода назад. На тот момент у нас подерживались iframe, flash, silverlight и обычная загрузка файлов. Но прогресс не стоит на месте, и вот уже последние бета-версии всеми горячо любимых браузеров в полной мере поддерживают html5 FileAPI (справедливости ради, стоит заметить, что, как обычно, некоторые поддерживают своеобразно, но об этом — ниже).

Пока писалась статья, Chrome 9 был объявлен stable и форсировано обновился уже на 75% установок 8 версии. Так, что празднуем поддержку File API первым стабильным браузером, ура!

Мы подумали, что не использовать такую технологию было бы преступлением против юзеров пользователей.
Подумали — и внедрили html5 загрузку в дополнение к уже существующим вариантам.
В итоге наши пользователи получили множество плюшек:
— прозрачная дозагрузка после обрыва соединения (и даже рестарта браузера!);
— очередь загрузки;
— прогресс-бар (пользователи MacOS и Safari наконец могут видеть прогресс без всяких инородных плагинов), возможность удаления файлов из очереди, если передумал.

В данной статье рассматривается опыт внедрения Silverlight-клиента для организации возобновляемой загрузки файлов на проекте Файлы@Mail.Ru.

Зачем это нужно? Думаю, не нужно рассказывать, что загрузку файлов на сервер и их хранение сейчас предоставляет очень большое количество веб-проектов, от небольших до очень крупных. Причем загрузка обычно реализована в виде обычного <input type=file/>, реже — с помощью Flash, еще реже — иными средствами (загрузку по FTP в данной статье мы не рассматриваем).

Проблема состоит в том, что протокол HTTP изначально текстовый и для передачи больших объемов бинарных данных не очень приспособлен. Отсюда вытекает, что при обрыве связи у пользователя, перезагрузке компьютера и тому подобных факапах наполовину переданный файл приходится начинать загружать заново, а в случае с медленным каналом это превращается в настоящее издевательство.

Что делать?

Простой скрипт. Определяет местоположение. Вы должны работать через Wifi.

iwlist wlan0 scan | sed -n 's/.* Address: //p;T;s/ //g;q' |
sed 's/.*/{version:1.1.0,host:maps.google.com,request_address:true,address_language:'${LANG/.*/}',wifi_towers:[{mac_address:"&",signal_strength:8,age:0}]}/' |
curl -sX POST -d @- www.google.com/loc/json |
sed -e 'h;s/.*latitude":\([^,]*\).*/\1/;G;s/\n[^\n]*longitude":\([^,]*\).*/,\1\n/;s|^|http://maps.google.com/maps?q=|;x;s/[,{]/\n/g;s/["}]//g;s/:/\t/g;s/\n//;G'

Не забудьте поставить curl.

В моем случае правильно определил город и улицу, ошибся с номером дома на 4.

Как это работает? Google собирает информацию о том, где расположены какие точки доступа (по MAC).
Первая часть (iwlist wlan0 scan | sed -n 's/.* Address: //p;T;s/ //g;q' ) — это просто определение мака.

Стремительно растет количество операций с использованием пластиковых карт: онлайн-платежи, безналичный расчет в торгово-сервисных предприятиях, манипуляции с банковским счетом в системах онлайн-банкинга и прочие платежные приложения от поставщиков услуг. Соответственно, расширяется инфраструктура, в которой циркулируют информация о держателях карт и критичные аутентификационные данные. В случае попадания этой информации или ее части в руки к злоумышленникам финансовые потери несут как банки-эмитенты, так и конечные пользователи.

Некоторое время назад я решил посвятить себя решению экзотической задачи — нарисовать волну wave-файла, как это делают аудио- и видеоредакторы, используя для этого Питон. В результате у меня получился небольшой скрипт, который вполне с этим справляется. Так, картинка выше сгенерирована им из песни «Under Pressure» группы Queen. Для сравнения — вид волны в аудиоредакторе:

Для разбора звука я использовал библиотеку numpy, а для построения графика — matplotlib. Под катом я изложу основы работы с wav-файлами и алгоритм скрипта.

Под катом — описание восьми сервисов, которые могут заметно облегчить жизнь веб-разработчика, верстальщика или дизайнера.

Задача

Да уж, собрал ты катер, что бы кататься по водоемам и наслаждаться жизнью. Поехал на очередное озеро отдохнуть, а тебе говорят, что мол с собаками и катерами вход воспрещен, и вообще у нас озеро вечно замерзшее, вот вам коньки — наслаждайтесь. «Welcome to the Virtual Hosting lake».

До недавних пор база данных нашего ресурса обслуживалась на пару двумя серверами: Bonnie и Clyde. Clyde — основной сервер проекта, отвечающий на все запросы, Bonnie — сервер, поддерживающий базы других проектов и слейв-клиент базы суперхабра.

Clyde хорошо справляется со своим делом, была проведена большая работа по оптимизации базы, так что он вполне перемалывал все обращения при генерации миллиона с лишним документов в сутки. Однако, в моменты непредсказуемых пиковых скачков нагрузка время от времени переваливала за допустимые пределы.

Учитывая постоянно растущий объём данных и нагрузку, настала пора предпринять шаг в сторону масштабирования аппаратных ресурсов базы данных.