Comments 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. Судя по википедии, Файерфокс и Опера уже давно поддерживают этот формат, остаётся только Вебкит. ИЕ, как обычно, когда-нибудь, возможно, если у разработчиков левая лодыжка зачешется.
Sign up to leave a comment.
Apple кодирует видео с помощью JPEG, JSON и <canvas>