Комментарии 90
Интересно, сколько будет занимать нормальное h264 видео с тем же контентом и качеством? Если речь об 2х размере, но выигрыше в совместимости с браузерами и фулскрин мобильными — почему бы и нет?
НЛО прилетело и опубликовало эту надпись здесь
Я не очень в теме, у вас есть готовое решение?
Наверное он имел ввиду граблеискатели… но действительно, очень лаконичный вариант
Оно наверное весьма частное но я бы хотел иметь такое решение для своих проектов.
Ума не приложу чем и как генерить все это.
Очень круто, ни каких кодеков, флеша и прочей прелести!
js и картинки.
Ума не приложу чем и как генерить все это.
Очень круто, ни каких кодеков, флеша и прочей прелести!
js и картинки.
Вот решение от автора Sublime Text github.com/sublimehq/anim_encoder
Flash!
Оказывается, на iPhone тег
Оказывается, на iPhone тег <video> работает только в полноэкранном режиме, так что Apple не может его использовать для вставки видеороликов на страницеВот стандартное решение: сделать так, чтобы тег video работал во всех режимах.
Я правильно понял, что Apple скрестили JPEG с GIFом?
Нет. Они лишь javascript'ом меняют картинки.
Но общий смысл ведь примерно тот же получается?
Нет. В GIF каждый кадр записан, буде-то это отдельная картинка, и он сам собой управляет. А тут сделан набор толькоменяющихся блоков в одном файле, как в спрайте, и джаваскрипт применяет эти блоки в нужный момент.
Всё, теперь понял. Я думал, что в gif каждый кадр — это что-то вроде diff, накладываемый на предыдущий кадр, или типа того.
В GIF кадр может изменять только часть площади. Отдельный кадр может быть хоть одним пикселом.
Я грубо объяснил не вдаваясь в детали.
Я не разбирался, что там у apple на самом деле, но если так, как пишет alizar: «нет возможности повторного использования блоков», то это вовсе не спрайты, а именно GIF-идеология.
Какая идеология? Так вообще можно любую анимацию под гребёнку называть gif, будто видео или меняющийся слайды на бигбордах. А бумажный блокнот называть документом word'а. Это совсем разные технологии и подходы.
Не любую. Есть принципиальная разница между спрайтовой анимацией, покадровой анимацией и, к примеру, анимацией векторных объектов.
Спрайтовая анимация предполагает наличие нескольких готовых блоков, которые перемещаются по кадру. И каждый блок можно использовать несколько раз в одном кадре и последовательно в разных кадрах на разных позициях.
Принцип анимации в GIF: каждый следующий кадр — это блок произвольного размера, который накладывается на предыдущее изображение. И никакого повторного использования графических объектов. Точно такой же принцип у этой эппловской анимации. Там не перемещается один и тот же спрайт по экрану, в каждом кадре на изображение накладывается новый блок на новой позиции. Да, вы не вдавались в детали, добавив деталь «спрайт», которая тут вообще неприменима.
Спрайтовая анимация предполагает наличие нескольких готовых блоков, которые перемещаются по кадру. И каждый блок можно использовать несколько раз в одном кадре и последовательно в разных кадрах на разных позициях.
Принцип анимации в GIF: каждый следующий кадр — это блок произвольного размера, который накладывается на предыдущее изображение. И никакого повторного использования графических объектов. Точно такой же принцип у этой эппловской анимации. Там не перемещается один и тот же спрайт по экрану, в каждом кадре на изображение накладывается новый блок на новой позиции. Да, вы не вдавались в детали, добавив деталь «спрайт», которая тут вообще неприменима.
Вроде как в гифе можно использовать картинки различного размера с указанием наложения. Или нет?
Блин, у них наверно на это патент взят.
наверное еще и запатентовали такой велосипед.
Там не допереведено. Судя по коду, в следующих версиях манифест о видео будет вставляться в PNG.
Распечатать, разрезать и собрать, как паззлик… :-)
Что-то напомнило принцип Adobe Captivate.
А не легче было с тегом video разобраться?
А чего минусуют человека? Я тоже считаю, что проще было разобраться с тегом видео, чтобы оно нормально проигрывалось в айфоне, чем придумывать жрущий батарейку яваскрипт.
А сколько раз вы собрались просматривать эту страницу с сайта эппл на вашем мобильном устройстве?
Очень интересный минус. То бишь дрочить на рекламу эппла это нормально? Сколько раз нужно пересмотреть эту анимашку, чтобы посадить себе аккумулятор, и зачем? Теперь мы определили правильное понятие фразы «яблодрочер», этот тот кто смотреть ролик со «слайд ту анлок» пока не сядет аккумулятор. На данный момент тут таких двое.
НЛО прилетело и опубликовало эту надпись здесь
Вероятно, даже если бы тег видео открывал видео не на весь экран, то тогда также нужно было бы разрешать его автовоспроизведение. А для мобильных устройств автовоспроизведение может быть крайне нежелательным.
К примеру, на айпаде видео воспроизводится не только во весь экран, но автовоспроизведения там тоже нет.
К примеру, на айпаде видео воспроизводится не только во весь экран, но автовоспроизведения там тоже нет.
Реализация нормальной работы с тегом
Прошу прощение, парсер съел весь пост.Реализация нормальной работы с video может быть реализована только через обновление, которое, по понятной причине, далеко не все установят себе. Дизайнерам Apple же нужно, чтобы анимашка нового iPhone 5 крутилась во что бы то ни стало на всех существующих i-устройствах. Поэтому для обратной программной совместимости программерам пришлось прибегнуть к классическому а-ля Microsoft решению в виде костылей.
Вообще на той странице дважды используется этот прием — второй раз на наушниках внизу страницы. И там с помощью мышки можно крутить/вертеть это дело, да и при клике подпись исчезает. Так что тегом video ну никак не обойтись.
На главной странице Sublime Text использовалась похожая технология. Тут разъяснения и исходники
Пост выявления фанатов Apple.
НЛО прилетело и опубликовало эту надпись здесь
Т.е. в том, что Эппл для своих мобильных устройств не запилила нормально поддержку
Эх, запорол комментарий.
Т.е. в том, что Эппл для своих мобильных устройств не запилила нормально поддержку тэга video, виноват HTML5?
Кстати, какой флеш на iOS?
Т.е. в том, что Эппл для своих мобильных устройств не запилила нормально поддержку тэга video, виноват HTML5?
Кстати, какой флеш на iOS?
Apple продвигает HTML 5 и призывает разработчиков отказаться от флеша в пользу HTML 5. Вот по этому ролику и видно, что они «продвигают» =)
НЛО прилетело и опубликовало эту надпись здесь
Я считаю, что твои, Михаил, нападки на HTML5 — необоснованны. Малейшая оплошность со стороны HTML5 вызывает у тебя бурю радости как на Хабре, так и в ленте Фейсбука (больше нигде тебя не читаю). Это белыми нитками шито.
При чем в данной ситуации я уже даже перестал понимать, что конкретно не так: ограничения тега video или реализация данной анимации Эпплом. Мне кажется, не будь у тега video ограничения по автопроигрыванию, ты бы тоже придрался — мол, «тупой HTML5 позволяет автоматически играть гигабайтные ролики, могли бы и подумать о пользователях мобильных устройств с платным траффиком».
Ну и все таки мой вопрос остается открытым: как решить эту задачу на флеше, не исключая пользователей iOS?
При чем в данной ситуации я уже даже перестал понимать, что конкретно не так: ограничения тега video или реализация данной анимации Эпплом. Мне кажется, не будь у тега video ограничения по автопроигрыванию, ты бы тоже придрался — мол, «тупой HTML5 позволяет автоматически играть гигабайтные ролики, могли бы и подумать о пользователях мобильных устройств с платным траффиком».
Ну и все таки мой вопрос остается открытым: как решить эту задачу на флеше, не исключая пользователей iOS?
НЛО прилетело и опубликовало эту надпись здесь
По мне так весьма интересное решение.
Свои же девелоперы стали жертвами своих же дизайнеров и юзабилистов? :-)
Ну девелоперы почти всегда становятся жертвой дизайнеров… Вместо того, чтобы сделать «как проще», приходится делать грабли, чтобы было «красиво и удобно».
Как дизайнер, который знает возможности css/jquery/php, отдающий верстальщику .psd где слои названы, вложены в группы типа Menu и рассованы по группам Header / Body / Footer, еще и оставляющий комментарии где могут присутствовать готовые куски css по линкам или тексту, заявляю — дизайнер хреновому программисту не помеха =)
По большому счету согласен, конечно. Просто это работает в обе стороны.
По большому счету согласен, конечно. Просто это работает в обе стороны.
Почему нельзя было просто использовать gif?..
Возможно, из-за ограничения в 256 цветов.
При желании можно получить больше цветов.
При этом проблемы со скоростью и качеством наблюдаемой анимации (получается, что один логический кадр состоит из нескольких физических, обеспечивающих цветность, но они, увы, не обязательно наложатся друг на друга мгновенно, без задержки) и с совместимостью (не все браузеры достаточно эрудированы для поддержки таких GIFов).
Только мне кажется, что задача показать небольшую анимашку в 2012 году как-бы не должна уже требовать столь странных усилий?
С
video не сработает autoplay без клика, думаю, это решающий фактор для внедрения именно такого метода.НЛО прилетело и опубликовало эту надпись здесь
Очень интересно понять, но я не понимаю. Можно поподробнее?
«алгоритм основан на том, что обновляется только часть картинки для экономии трафика»
какая конкретно часть картинки обновляется? Только то что двигалось?
А зачем на блоки делить? Чтобы оптимизировать трафик? Ну запихнули бы слайдер и иконки в разных местах в png шки?
«алгоритм основан на том, что обновляется только часть картинки для экономии трафика»
какая конкретно часть картинки обновляется? Только то что двигалось?
А зачем на блоки делить? Чтобы оптимизировать трафик? Ну запихнули бы слайдер и иконки в разных местах в png шки?
а анимация наушников также сделана? www.apple.com/iphone/design/#animation-unlock?
Могли-бы и quicktime со странички вырезать :)
Оригинальное кроссбраузерное решение, в чем заключается абсурдность ситуации?
использовал подобную технику подмены jpeg-ов в 1996 или 1997 году будучи студентом для создания примитивной javascript игрушки. Там даже звук был…
UPD… ух ты, миррор нашелся, сохранили добрые люди:
htmlweb.ru/java/games/gun/index.htm
UPD… ух ты, миррор нашелся, сохранили добрые люди:
htmlweb.ru/java/games/gun/index.htm
НЛО прилетело и опубликовало эту надпись здесь
А Mithgol очень даже прав по поводу aPNG. Судя по википедии, Файерфокс и Опера уже давно поддерживают этот формат, остаётся только Вебкит. ИЕ, как обычно, когда-нибудь, возможно, если у разработчиков левая лодыжка зачешется.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Apple кодирует видео с помощью JPEG, JSON и <canvas>