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

^{Фрагмент файла unlock_001.jpg [1]}

Компания Apple имеет огромный опыт в разработке веб-технологий, но сейчас попала в абсурдную ситуацию. Если зайти на страницу с описанием дизайнерских инноваций iPhone ^[2], то можно увидеть странное: видеоролик с анимацией разблокировки «айфона» закодирован с помощью нескольких JPEG-файлов необычного вида.

Возникает вопрос: как вообще это работает? И зачем прибегать к подобным ухищрениям, если можно использовать стандартный тег <video>.

Объяснение простое. Оказывается, на iPhone тег <video> работает только в полноэкранном режиме, так что Apple не может его использовать для вставки видеороликов на странице. Кроме того, Apple использует исключительно видео H.264, а его поддерживают не все браузеры, что неприемлемо для промо-странички.

Раньше Apple решала эту проблему, создавая JPEG для каждого фрейма ^[3] анимации, в результате чего двухсекундная анимация занимала 5 МБ. Теперь они осуществили оптимизацию: анимация iPhone 5 объёмом всего лишь один мегабайт состоит из пяти файлов:

www.apple.com/iphone/design/images/unlock/unlock_manifest.json ^[4]
www.apple.com/iphone/design/images/unlock/unlock_keyframe.jpg ^[5]
www.apple.com/iphone/design/images/unlock/unlock_001.jpg ^[1]
www.apple.com/iphone/design/images/unlock/unlock_002.jpg ^[6]
www.apple.com/iphone/design/images/unlock/unlock_endframe.jpg ^[7]

Алгоритм работы описан в файле ac_flow.js ^[8] и основан на том, что обновляется только часть картинки для экономии трафика. В файлах 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 ^[9]

Автор: alizar