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

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 90

      +3
      Интересно, сколько будет занимать нормальное h264 видео с тем же контентом и качеством? Если речь об 2х размере, но выигрыше в совместимости с браузерами и фулскрин мобильными — почему бы и нет?
        +5
        разница на порядок и более, но для крохотных анимаций действительно, «почему бы и нет»? тем более процесс создания автоматизирован.
      • UFO just landed and posted this here
          +12
          Я не очень в теме, у вас есть готовое решение?
            +10
            Наверное он имел ввиду граблеискатели… но действительно, очень лаконичный вариант
              +1
              Оно наверное весьма частное но я бы хотел иметь такое решение для своих проектов.
              Ума не приложу чем и как генерить все это.
              Очень круто, ни каких кодеков, флеша и прочей прелести!
              js и картинки.
            +7
            Flash!
              +1
              Вспомните отношение Apple к Flash'у…
                +4
                Ну вот пусть теперь и анимируют жпеги ява-скриптом.

                Решение кстати нормальное, интересно автоматизированно ли оно или они вручную изменившиеся кусочки выделяют. Если вручную, то это очень велосипедно.
              –1
              Оказывается, на iPhone тег
                +23
                Оказывается, на iPhone тег <video> работает только в полноэкранном режиме, так что Apple не может его использовать для вставки видеороликов на странице
                Вот стандартное решение: сделать так, чтобы тег video работал во всех режимах.
              +8
              Я правильно понял, что Apple скрестили JPEG с GIFом?
                0
                Нет. Они лишь javascript'ом меняют картинки.
                  +7
                  Но общий смысл ведь примерно тот же получается?
                    –4
                    Нет. В GIF каждый кадр записан, буде-то это отдельная картинка, и он сам собой управляет. А тут сделан набор толькоменяющихся блоков в одном файле, как в спрайте, и джаваскрипт применяет эти блоки в нужный момент.
                      +2
                      Всё, теперь понял. Я думал, что в gif каждый кадр — это что-то вроде diff, накладываемый на предыдущий кадр, или типа того.
                        +3
                        Именно так и есть.
                          +38
                          Спасибо, теперь понял обратно. :)
                        0
                        В GIF кадр может изменять только часть площади. Отдельный кадр может быть хоть одним пикселом.
                          –4
                          Я грубо объяснил не вдаваясь в детали.
                            +3
                            Я не разбирался, что там у apple на самом деле, но если так, как пишет alizar: «нет возможности повторного использования блоков», то это вовсе не спрайты, а именно GIF-идеология.
                              0
                              Какая идеология? Так вообще можно любую анимацию под гребёнку называть gif, будто видео или меняющийся слайды на бигбордах. А бумажный блокнот называть документом word'а. Это совсем разные технологии и подходы.
                                +3
                                Не любую. Есть принципиальная разница между спрайтовой анимацией, покадровой анимацией и, к примеру, анимацией векторных объектов.

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

                                Принцип анимации в GIF: каждый следующий кадр — это блок произвольного размера, который накладывается на предыдущее изображение. И никакого повторного использования графических объектов. Точно такой же принцип у этой эппловской анимации. Там не перемещается один и тот же спрайт по экрану, в каждом кадре на изображение накладывается новый блок на новой позиции. Да, вы не вдавались в детали, добавив деталь «спрайт», которая тут вообще неприменима.
                          0
                          Вроде как в гифе можно использовать картинки различного размера с указанием наложения. Или нет?
                            –2
                            У меня малый опыт, но как я помню, все картинки одного размера с возможностью альфа канала.
                              0
                              Можно. Каждый кадр может быть произвольного размера, есть разные режимы наложения, в том числе с поддержкой прозрачности.
                          0
                          Блин, у них наверно на это патент взят.
                        +16
                        наверное еще и запатентовали такой велосипед.
                          +10
                          И даже способ патентования такого велосипеда запатентовали.
                            +35
                            Я уже мечтаю что бы кто-то запатентовал подобные комментарии и их не стало на хабре…
                            • UFO just landed and posted this here
                                0
                                Тут больше копированием попахивает.
                                  0
                                  Тоже, блоками 8х8? :)
                          0
                          Там не допереведено. Судя по коду, в следующих версиях манифест о видео будет вставляться в PNG.
                            0
                            Распечатать, разрезать и собрать, как паззлик… :-)
                              0
                              Что-то напомнило принцип Adobe Captivate.
                                0
                                Это тот, который из слайдов делал флеш?
                                  0
                                  Флеш был не единственным выходным форматом. А так да, оно.
                                    0
                                    Я помню, на нём, или она ещё была в составе Macromedia делал простенький тутор по zmodeler. )
                                +5
                                А не легче было с тегом video разобраться?
                                  +3
                                  А чего минусуют человека? Я тоже считаю, что проще было разобраться с тегом видео, чтобы оно нормально проигрывалось в айфоне, чем придумывать жрущий батарейку яваскрипт.
                                    0
                                    А сколько раз вы собрались просматривать эту страницу с сайта эппл на вашем мобильном устройстве?
                                      +2
                                      Очень интересный минус. То бишь дрочить на рекламу эппла это нормально? Сколько раз нужно пересмотреть эту анимашку, чтобы посадить себе аккумулятор, и зачем? Теперь мы определили правильное понятие фразы «яблодрочер», этот тот кто смотреть ролик со «слайд ту анлок» пока не сядет аккумулятор. На данный момент тут таких двое.
                                    +1
                                    Видимо не легче. Могу например предположить, что видео там декодируется аппаратно и только на весь экран, иначе только менять железо.
                                      +2
                                      Вероятно, даже если бы тег видео открывал видео не на весь экран, то тогда также нужно было бы разрешать его автовоспроизведение. А для мобильных устройств автовоспроизведение может быть крайне нежелательным.

                                      К примеру, на айпаде видео воспроизводится не только во весь экран, но автовоспроизведения там тоже нет.
                                        0
                                        Реализация нормальной работы с тегом
                                          +2
                                          Прошу прощение, парсер съел весь пост.

                                          Реализация нормальной работы с video может быть реализована только через обновление, которое, по понятной причине, далеко не все установят себе. Дизайнерам Apple же нужно, чтобы анимашка нового iPhone 5 крутилась во что бы то ни стало на всех существующих i-устройствах. Поэтому для обратной программной совместимости программерам пришлось прибегнуть к классическому а-ля Microsoft решению в виде костылей.
                                            –1
                                            Что-то парсер сегодня озверевший)
                                              +5
                                              А всё потому, что кое-кто пишет «<video>» без мысли о том, что это тег разметки и что его надо поэтому записывать через HTML entities.
                                          +1
                                          Вообще на той странице дважды используется этот прием — второй раз на наушниках внизу страницы. И там с помощью мышки можно крутить/вертеть это дело, да и при клике подпись исчезает. Так что тегом video ну никак не обойтись.
                                          +3
                                          На главной странице Sublime Text использовалась похожая технология. Тут разъяснения и исходники
                                            –10
                                            Пост выявления фанатов Apple.
                                              +7
                                              По моему тут обсуждают интересную реализацию.
                                            • UFO just landed and posted this here
                                                –2
                                                Т.е. в том, что Эппл для своих мобильных устройств не запилила нормально поддержку
                                                  +4
                                                  Эх, запорол комментарий.

                                                  Т.е. в том, что Эппл для своих мобильных устройств не запилила нормально поддержку тэга video, виноват HTML5?
                                                  Кстати, какой флеш на iOS?
                                                    +2
                                                    Apple продвигает HTML 5 и призывает разработчиков отказаться от флеша в пользу HTML 5. Вот по этому ролику и видно, что они «продвигают» =)
                                                    • UFO just landed and posted this here
                                                        +1
                                                        Я считаю, что твои, Михаил, нападки на HTML5 — необоснованны. Малейшая оплошность со стороны HTML5 вызывает у тебя бурю радости как на Хабре, так и в ленте Фейсбука (больше нигде тебя не читаю). Это белыми нитками шито.
                                                        При чем в данной ситуации я уже даже перестал понимать, что конкретно не так: ограничения тега video или реализация данной анимации Эпплом. Мне кажется, не будь у тега video ограничения по автопроигрыванию, ты бы тоже придрался — мол, «тупой HTML5 позволяет автоматически играть гигабайтные ролики, могли бы и подумать о пользователях мобильных устройств с платным траффиком».

                                                        Ну и все таки мой вопрос остается открытым: как решить эту задачу на флеше, не исключая пользователей iOS?
                                                        • UFO just landed and posted this here
                                                          • UFO just landed and posted this here
                                                              0
                                                              Ой господи, 12 голосов за карму, и вы уже рассуждаете о «мнении стада». Выборка маловата.
                                                              • UFO just landed and posted this here
                                                                  0
                                                                  Я ненамного позже вас зарегистрирован, если уж на то пошло.
                                                        • UFO just landed and posted this here
                                                        +5
                                                        По мне так весьма интересное решение.
                                                          +3
                                                          Свои же девелоперы стали жертвами своих же дизайнеров и юзабилистов? :-)
                                                            0
                                                            Ну девелоперы почти всегда становятся жертвой дизайнеров… Вместо того, чтобы сделать «как проще», приходится делать грабли, чтобы было «красиво и удобно».
                                                              0
                                                              Как дизайнер, который знает возможности css/jquery/php, отдающий верстальщику .psd где слои названы, вложены в группы типа Menu и рассованы по группам Header / Body / Footer, еще и оставляющий комментарии где могут присутствовать готовые куски css по линкам или тексту, заявляю — дизайнер хреновому программисту не помеха =)

                                                              По большому счету согласен, конечно. Просто это работает в обе стороны.
                                                            +2
                                                            Почему нельзя было просто использовать gif?..
                                                              0
                                                              Возможно, из-за ограничения в 256 цветов.
                                                                0
                                                                  0
                                                                  При этом проблемы со скоростью и качеством наблюдаемой анимации (получается, что один логический кадр состоит из нескольких физических, обеспечивающих цветность, но они, увы, не обязательно наложатся друг на друга мгновенно, без задержки) и с совместимостью (не все браузеры достаточно эрудированы для поддержки таких GIFов).
                                                              +15
                                                              Только мне кажется, что задача показать небольшую анимашку в 2012 году как-бы не должна уже требовать столь странных усилий?
                                                                +5
                                                                В этом следует винить оппонентов формата aPNG, в том числе и производителей Apple Safari, так что компания реально наступила на собственные грабли.
                                                                +2
                                                                С video не сработает autoplay без клика, думаю, это решающий фактор для внедрения именно такого метода.
                                                                • UFO just landed and posted this here
                                                                    0
                                                                    И срочно выпустить обновление iOS?
                                                                    • UFO just landed and posted this here
                                                                    0
                                                                    Очень интересно понять, но я не понимаю. Можно поподробнее?
                                                                    «алгоритм основан на том, что обновляется только часть картинки для экономии трафика»
                                                                    какая конкретно часть картинки обновляется? Только то что двигалось?
                                                                    А зачем на блоки делить? Чтобы оптимизировать трафик? Ну запихнули бы слайдер и иконки в разных местах в png шки?
                                                                    0
                                                                    Могли-бы и quicktime со странички вырезать :)
                                                                      0
                                                                      Оригинальное кроссбраузерное решение, в чем заключается абсурдность ситуации?
                                                                        +3
                                                                        использовал подобную технику подмены jpeg-ов в 1996 или 1997 году будучи студентом для создания примитивной javascript игрушки. Там даже звук был…
                                                                        UPD… ух ты, миррор нашелся, сохранили добрые люди:
                                                                        htmlweb.ru/java/games/gun/index.htm
                                                                          0
                                                                          Ого. Я уже это видел лет пять назад.
                                                                        • UFO just landed and posted this here
                                                                            0
                                                                            А Mithgol очень даже прав по поводу aPNG. Судя по википедии, Файерфокс и Опера уже давно поддерживают этот формат, остаётся только Вебкит. ИЕ, как обычно, когда-нибудь, возможно, если у разработчиков левая лодыжка зачешется.
                                                                              0
                                                                              Почему вы вините браузеры?
                                                                              Проблема в том, что aPNG не стал частью стандарта PNG и не поддерживается в libpng. У aPNG проблема с поддержкой на более высоком уровне и отсутствие поддержки со стороны браузеров — это уже как следствие

                                                                            Only users with full accounts can post comments. Log in, please.