
Apple кодирует видео с помощью JPEG, JSON и <canvas>

Фрагмент файла unlock_001.jpg
Компания Apple имеет огромный опыт в разработке веб-технологий, но сейчас попала в абсурдную ситуацию. Если зайти на страницу с описанием дизайнерских инноваций iPhone, то можно увидеть странное: видеоролик с анимацией разблокировки «айфона» закодирован с помощью нескольких JPEG-файлов необычного вида.
Возникает вопрос: как вообще это работает? И зачем прибегать к подобным ухищрениям, если можно использовать стандартный тег <video>.
Объяснение простое. Оказывается, на iPhone тег <video> работает только в полноэкранном режиме, так что Apple не может его использовать для вставки видеороликов на странице. Кроме того, Apple использует исключительно видео H.264, а его поддерживают не все браузеры, что неприемлемо для промо-странички.
Раньше Apple решала эту проблему, создавая JPEG для каждого фрейма анимации, в результате чего двухсекундная анимация занимала 5 МБ. Теперь они осуществили оптимизацию: анимация iPhone 5 объёмом всего лишь один мегабайт состоит из пяти файлов:
www.apple.com/iphone/design/images/unlock/unlock_manifest.json
www.apple.com/iphone/design/images/unlock/unlock_keyframe.jpg
www.apple.com/iphone/design/images/unlock/unlock_001.jpg
www.apple.com/iphone/design/images/unlock/unlock_002.jpg
www.apple.com/iphone/design/images/unlock/unlock_endframe.jpg
Алгоритм работы описан в файле ac_flow.js и основан на том, что обновляется только часть картинки для экономии трафика. В файлах
unlock_001.jpg
и unlock_002.jpg
содержатся эти обновляемые фрагменты изображения. В файле unlock_manifest.json
указаны координаты, чтобы позиционировать части. Чтобы JPEG-артефакты отдельных фрагментов не испортили общую картину, Apple использует блоки размером 8х8 пикселов, как это делает кодек JPEG. Вышеупомянутые файлы unlock_001.jpg
и unlock_002.jpg
, фактически, используются как непрерывный поток блоков 8х8. Инструкции для обработки потока указаны отдельно в формате base64, который приходится декодировать: 
Каждая инструкция состоит из пяти байт, первые три байта указывают координаты цели в canvas, а последние два байта — сколько блоков туда поместить. Например, инструкция
AAxAC
означает, что нужно взять два блока (AC) и разместить их в позицию 49 (AAx).С таким алгоритмом сборки видео нет возможности повторного использования блоков, но зато сам манифест получается вполне лаконичным.
via dbloom
Comments 90
Only users with full accounts can post comments. Log in, please.