alizar September 17, 2012 at 06:25 PM

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

Website development

^{Фрагмент файла 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

Tags:

Hubs:

Website development

Comments 90

Nomad1 September 17, 2012 at 06:30 PM
+3
Интересно, сколько будет занимать нормальное h264 видео с тем же контентом и качеством? Если речь об 2х размере, но выигрыше в совместимости с браузерами и фулскрин мобильными — почему бы и нет?
- Tenphi September 17, 2012 at 07:04 PM
  +5
  разница на порядок и более, но для крохотных анимаций действительно, «почему бы и нет»? тем более процесс создания автоматизирован.
UFO just landed and posted this here
- pluser September 17, 2012 at 06:48 PM
  +12
  Я не очень в теме, у вас есть готовое решение?
  - Wernisag September 17, 2012 at 06:59 PM
    
    +10
    Наверное он имел ввиду граблеискатели… но действительно, очень лаконичный вариант
    - pluser September 17, 2012 at 07:06 PM
      
      +1
      
      Оно наверное весьма частное но я бы хотел иметь такое решение для своих проектов.
      Ума не приложу чем и как генерить все это.
      Очень круто, ни каких кодеков, флеша и прочей прелести!
      js и картинки.
      - dotsquid September 17, 2012 at 11:43 PM
        
        +5
        
        Вот решение от автора Sublime Text github.com/sublimehq/anim_encoder
  - orcy September 17, 2012 at 07:03 PM
    
    +7
    Flash!
    - d3vil September 17, 2012 at 10:58 PM
      
      +1
      
      Вспомните отношение Apple к Flash'у…
      - orcy September 18, 2012 at 08:08 AM
        
        +4
        
        Ну вот пусть теперь и анимируют жпеги ява-скриптом.
        
        Решение кстати нормальное, интересно автоматизированно ли оно или они вручную изменившиеся кусочки выделяют. Если вручную, то это очень велосипедно.
  - nsinreal September 17, 2012 at 10:40 PM
    
    –1
    Оказывается, на iPhone тег
  - nsinreal September 17, 2012 at 10:41 PM
    
    +23
    Оказывается, на iPhone тег <video> работает только в полноэкранном режиме, так что Apple не может его использовать для вставки видеороликов на странице
    Вот стандартное решение: сделать так, чтобы тег video работал во всех режимах.
norlin September 17, 2012 at 06:56 PM
+8
Я правильно понял, что Apple скрестили JPEG с GIFом?
- trikadin September 17, 2012 at 06:59 PM
  0
  Нет. Они лишь javascript'ом меняют картинки.
  - norlin September 17, 2012 at 07:00 PM
    
    +7
    Но общий смысл ведь примерно тот же получается?
    - SerDIDG September 17, 2012 at 07:17 PM
      
      –4
      
      Нет. В GIF каждый кадр записан, буде-то это отдельная картинка, и он сам собой управляет. А тут сделан набор толькоменяющихся блоков в одном файле, как в спрайте, и джаваскрипт применяет эти блоки в нужный момент.
      - norlin September 17, 2012 at 07:27 PM
        
        +2
        
        Всё, теперь понял. Я думал, что в gif каждый кадр — это что-то вроде diff, накладываемый на предыдущий кадр, или типа того.
        
        zotov September 17, 2012 at 07:43 PM
        
        +3
        
        Именно так и есть.
        
        norlin September 17, 2012 at 07:54 PM
        
        +38
        
        Спасибо, теперь понял обратно. :)
      - zotov September 17, 2012 at 07:29 PM
        
        0
        
        В GIF кадр может изменять только часть площади. Отдельный кадр может быть хоть одним пикселом.
        
        SerDIDG September 17, 2012 at 07:33 PM
        
        –4
        
        Я грубо объяснил не вдаваясь в детали.
        
        zotov September 17, 2012 at 07:38 PM
        
        +3
        
        Я не разбирался, что там у apple на самом деле, но если так, как пишет alizar: «нет возможности повторного использования блоков», то это вовсе не спрайты, а именно GIF-идеология.
        
        SerDIDG September 17, 2012 at 07:41 PM
        
        0
        
        Какая идеология? Так вообще можно любую анимацию под гребёнку называть gif, будто видео или меняющийся слайды на бигбордах. А бумажный блокнот называть документом word'а. Это совсем разные технологии и подходы.
        
        zotov September 17, 2012 at 08:27 PM
        
        +3
        
        Не любую. Есть принципиальная разница между спрайтовой анимацией, покадровой анимацией и, к примеру, анимацией векторных объектов.
        
        Спрайтовая анимация предполагает наличие нескольких готовых блоков, которые перемещаются по кадру. И каждый блок можно использовать несколько раз в одном кадре и последовательно в разных кадрах на разных позициях.
        
        Принцип анимации в GIF: каждый следующий кадр — это блок произвольного размера, который накладывается на предыдущее изображение. И никакого повторного использования графических объектов. Точно такой же принцип у этой эппловской анимации. Там не перемещается один и тот же спрайт по экрану, в каждом кадре на изображение накладывается новый блок на новой позиции. Да, вы не вдавались в детали, добавив деталь «спрайт», которая тут вообще неприменима.
      - mclander September 17, 2012 at 09:53 PM
        
        0
        
        Вроде как в гифе можно использовать картинки различного размера с указанием наложения. Или нет?
        
        SerDIDG September 17, 2012 at 09:55 PM
        
        –2
        
        У меня малый опыт, но как я помню, все картинки одного размера с возможностью альфа канала.
        
        TiGR September 18, 2012 at 12:01 PM
        
        0
        
        Можно. Каждый кадр может быть произвольного размера, есть разные режимы наложения, в том числе с поддержкой прозрачности.
  - mclander September 17, 2012 at 09:51 PM
    
    0
    Блин, у них наверно на это патент взят.
srka September 17, 2012 at 07:17 PM
+16
наверное еще и запатентовали такой велосипед.
- s0rr0w September 17, 2012 at 07:22 PM
  +10
  И даже способ патентования такого велосипеда запатентовали.
  - Pixat September 17, 2012 at 07:32 PM
    
    +35
    Я уже мечтаю что бы кто-то запатентовал подобные комментарии и их не стало на хабре…
    - UFO just landed and posted this here
      - SerDIDG September 17, 2012 at 09:33 PM
        
        0
        
        Тут больше копированием попахивает.
        
        achekalin September 18, 2012 at 11:15 AM
        
        0
        
        Тоже, блоками 8х8? :)
dmitriid September 17, 2012 at 07:20 PM
0
Там не допереведено. Судя по коду, в следующих версиях манифест о видео будет вставляться в PNG.
ertaquo September 17, 2012 at 08:08 PM
0
Распечатать, разрезать и собрать, как паззлик… :-)
boramod September 17, 2012 at 08:18 PM
0
Что-то напомнило принцип Adobe Captivate.
- SerDIDG September 17, 2012 at 08:30 PM
  0
  Это тот, который из слайдов делал флеш?
  - boramod September 17, 2012 at 08:33 PM
    
    0
    Флеш был не единственным выходным форматом. А так да, оно.
    - SerDIDG September 17, 2012 at 08:38 PM
      
      0
      
      Я помню, на нём, или она ещё была в составе Macromedia делал простенький тутор по zmodeler. )
atomAltera September 17, 2012 at 08:18 PM
+5
А не легче было с тегом video разобраться?
- Iliapan September 17, 2012 at 09:26 PM
  +3
  А чего минусуют человека? Я тоже считаю, что проще было разобраться с тегом видео, чтобы оно нормально проигрывалось в айфоне, чем придумывать жрущий батарейку яваскрипт.
  - SerDIDG September 17, 2012 at 09:37 PM
    
    0
    А сколько раз вы собрались просматривать эту страницу с сайта эппл на вашем мобильном устройстве?
    - SerDIDG September 17, 2012 at 11:48 PM
      
      +2
      
      Очень интересный минус. То бишь дрочить на рекламу эппла это нормально? Сколько раз нужно пересмотреть эту анимашку, чтобы посадить себе аккумулятор, и зачем? Теперь мы определили правильное понятие фразы «яблодрочер», этот тот кто смотреть ролик со «слайд ту анлок» пока не сядет аккумулятор. На данный момент тут таких двое.
- vsb September 17, 2012 at 11:43 PM
  +1
  Видимо не легче. Могу например предположить, что видео там декодируется аппаратно и только на весь экран, иначе только менять железо.
- DeleteOne September 18, 2012 at 02:55 AM
  +2
  Вероятно, даже если бы тег видео открывал видео не на весь экран, то тогда также нужно было бы разрешать его автовоспроизведение. А для мобильных устройств автовоспроизведение может быть крайне нежелательным.
  
  К примеру, на айпаде видео воспроизводится не только во весь экран, но автовоспроизведения там тоже нет.
- irsick September 18, 2012 at 03:26 AM
  0
  Реализация нормальной работы с тегом
  - irsick September 18, 2012 at 03:43 AM
    
    +2
    Прошу прощение, парсер съел весь пост.
    
    Реализация нормальной работы с video может быть реализована только через обновление, которое, по понятной причине, далеко не все установят себе. Дизайнерам Apple же нужно, чтобы анимашка нового iPhone 5 крутилась во что бы то ни стало на всех существующих i-устройствах. Поэтому для обратной программной совместимости программерам пришлось прибегнуть к классическому а-ля Microsoft решению в виде костылей.
    - DeadFine September 18, 2012 at 01:55 PM
      
      –1
      
      Что-то парсер сегодня озверевший)
      - Mithgol September 18, 2012 at 02:22 PM
        
        +5
        
        А всё потому, что кое-кто пишет «<video>» без мысли о том, что это тег разметки и что его надо поэтому записывать через HTML entities.
- elfiki September 18, 2012 at 11:58 AM
  +1
  Вообще на той странице дважды используется этот прием — второй раз на наушниках внизу страницы. И там с помощью мышки можно крутить/вертеть это дело, да и при клике подпись исчезает. Так что тегом video ну никак не обойтись.
asafin September 17, 2012 at 08:30 PM
+3
На главной странице Sublime Text использовалась похожая технология. Тут разъяснения и исходники
ClusterM September 17, 2012 at 08:37 PM
–10
Пост выявления фанатов Apple.
- SerDIDG September 17, 2012 at 08:41 PM
  +7
  По моему тут обсуждают интересную реализацию.
UFO just landed and posted this here
- dotsquid September 17, 2012 at 11:23 PM
  –2
  Т.е. в том, что Эппл для своих мобильных устройств не запилила нормально поддержку
- dotsquid September 17, 2012 at 11:25 PM
  +4
  Эх, запорол комментарий.
  
  Т.е. в том, что Эппл для своих мобильных устройств не запилила нормально поддержку тэга video, виноват HTML5?
  Кстати, какой флеш на iOS?
  - Ogra September 18, 2012 at 08:03 AM
    
    +2
    Apple продвигает HTML 5 и призывает разработчиков отказаться от флеша в пользу HTML 5. Вот по этому ролику и видно, что они «продвигают» =)
  - UFO just landed and posted this here
    - dotsquid September 18, 2012 at 11:14 AM
      
      +1
      
      Я считаю, что твои, Михаил, нападки на HTML5 — необоснованны. Малейшая оплошность со стороны HTML5 вызывает у тебя бурю радости как на Хабре, так и в ленте Фейсбука (больше нигде тебя не читаю). Это белыми нитками шито.
      При чем в данной ситуации я уже даже перестал понимать, что конкретно не так: ограничения тега video или реализация данной анимации Эпплом. Мне кажется, не будь у тега video ограничения по автопроигрыванию, ты бы тоже придрался — мол, «тупой HTML5 позволяет автоматически играть гигабайтные ролики, могли бы и подумать о пользователях мобильных устройств с платным траффиком».
      
      Ну и все таки мой вопрос остается открытым: как решить эту задачу на флеше, не исключая пользователей iOS?
      - UFO just landed and posted this here
      - UFO just landed and posted this here
        
        Ogra September 19, 2012 at 07:21 AM
        
        0
        
        Ой господи, 12 голосов за карму, и вы уже рассуждаете о «мнении стада». Выборка маловата.
        
        UFO just landed and posted this here
        
        Ogra September 19, 2012 at 09:02 AM
        
        0
        
        Я ненамного позже вас зарегистрирован, если уж на то пошло.
  - UFO just landed and posted this here
bondbig September 17, 2012 at 09:34 PM
+5
По мне так весьма интересное решение.
dyakov September 17, 2012 at 10:13 PM
+3
Свои же девелоперы стали жертвами своих же дизайнеров и юзабилистов? :-)
- Crazybot September 17, 2012 at 10:18 PM
  0
  Ну девелоперы почти всегда становятся жертвой дизайнеров… Вместо того, чтобы сделать «как проще», приходится делать грабли, чтобы было «красиво и удобно».
  - Pixat September 17, 2012 at 11:03 PM
    
    0
    Как дизайнер, который знает возможности css/jquery/php, отдающий верстальщику .psd где слои названы, вложены в группы типа Menu и рассованы по группам Header / Body / Footer, еще и оставляющий комментарии где могут присутствовать готовые куски css по линкам или тексту, заявляю — дизайнер хреновому программисту не помеха =)
    
    По большому счету согласен, конечно. Просто это работает в обе стороны.
fenrirgray September 17, 2012 at 10:25 PM
+2
Почему нельзя было просто использовать gif?..
- DeleteOne September 18, 2012 at 02:52 AM
  0
  Возможно, из-за ограничения в 256 цветов.
  - Maccimo September 18, 2012 at 06:31 AM
    
    0
    При желании можно получить больше цветов.
    - Mithgol September 18, 2012 at 02:26 PM
      
      0
      
      При этом проблемы со скоростью и качеством наблюдаемой анимации (получается, что один логический кадр состоит из нескольких физических, обеспечивающих цветность, но они, увы, не обязательно наложатся друг на друга мгновенно, без задержки) и с совместимостью (не все браузеры достаточно эрудированы для поддержки таких GIFов).
tangro September 17, 2012 at 10:26 PM
+15
Только мне кажется, что задача показать небольшую анимашку в 2012 году как-бы не должна уже требовать столь странных усилий?
- Mithgol September 18, 2012 at 02:28 PM
  +5
  В этом следует винить оппонентов формата aPNG, в том числе и производителей Apple Safari, так что компания реально наступила на собственные грабли.
simpel September 18, 2012 at 12:45 AM
+2
С video не сработает autoplay без клика, думаю, это решающий фактор для внедрения именно такого метода.
UFO just landed and posted this here
- NermaN September 18, 2012 at 11:41 AM
  0
  И срочно выпустить обновление iOS?
  - UFO just landed and posted this here
vladislavkorobov September 18, 2012 at 07:24 AM
0
Очень интересно понять, но я не понимаю. Можно поподробнее?
«алгоритм основан на том, что обновляется только часть картинки для экономии трафика»
какая конкретно часть картинки обновляется? Только то что двигалось?
А зачем на блоки делить? Чтобы оптимизировать трафик? Ну запихнули бы слайдер и иконки в разных местах в png шки?
- vladislavkorobov September 18, 2012 at 07:25 AM
  +1
  а анимация наушников также сделана? www.apple.com/iphone/design/#animation-unlock?
  - elfiki September 18, 2012 at 12:00 PM
    
    –1
    именно. не ради анимашки анлока это сделано.
seleko September 18, 2012 at 01:05 PM
0
Могли-бы и quicktime со странички вырезать :)
join September 18, 2012 at 01:18 PM
0
Оригинальное кроссбраузерное решение, в чем заключается абсурдность ситуации?
andreyvo September 18, 2012 at 02:06 PM
+3
использовал подобную технику подмены jpeg-ов в 1996 или 1997 году будучи студентом для создания примитивной javascript игрушки. Там даже звук был…
UPD… ух ты, миррор нашелся, сохранили добрые люди:
htmlweb.ru/java/games/gun/index.htm
- Finom September 20, 2012 at 02:20 AM
  0
  Ого. Я уже это видел лет пять назад.
UFO just landed and posted this here
Finom September 20, 2012 at 02:26 AM
0
А Mithgol очень даже прав по поводу aPNG. Судя по википедии, Файерфокс и Опера уже давно поддерживают этот формат, остаётся только Вебкит. ИЕ, как обычно, когда-нибудь, возможно, если у разработчиков левая лодыжка зачешется.
- banzalik September 20, 2012 at 11:52 AM
  0
  Почему вы вините браузеры?
  Проблема в том, что aPNG не стал частью стандарта PNG и не поддерживается в libpng. У aPNG проблема с поддержкой на более высоком уровне и отсутствие поддержки со стороны браузеров — это уже как следствие