Стандарты web-а меняются, во всю используется потоковое видео и аудио, расширяются возможности браузеров, в том числе и поддерживаемых ими графических и мультимедиа форматов, грядет html5.
Под катом я хочу рассказать про открытые форматы призванные в ближайшем будущем заменить привычные нам gif, jpg, png, swf и flv.
Приведенная картинка имеет формат APNG, в большинстве современных браузеров она будет анимированной и с прозрачной подложкой.
Существует два перспективных ответвления PNG формата:
www.libmng.com
Плюсы (при полной поддержке):
Минусы:
Без дополнительных плагинов этот формат поддерживают mMosaic, Konqueror, с некоторыми глюками старые версии движка Mozilla до 1.4 и браузеры на телефонах Sony-ericsson, почти все остальные браузеры имеют соответствующие расширения, сделанные энтузиастами. Internet Explorer поддерживает его посредством стороннего active-x.
wiki.mozilla.org/APNG_Specification
Плюсы:
Минусы:
Нативно этот формат поддерживают Mozilla firefox 3.0 и выше, Opera 9.5, остальные браузеры с помощью плагинов.
Перейдем к наиболее преспективному, на мой взгляд, формату хранения графических данных.
www.w3.org/TR/SVG12
en.wikipedia.org/wiki/Scalable_Vector_Graphics
SVG — это уже сложившийся, одобренный W3C и наиболее преспективный открытый стандарт для представления векторной (и не только посредством em)графики. Я бы охарактеризовал его как упрощенный swf, представленный в xml виде.
Основные плюсы:
Минусы:
Без дополнительных плагинов этот формат версии 1.1 или (DVG-tiny) поддерживают Firefox 2 и выше, Opera и google Chrome. Более подробно по поддержке этого формата различными браузерами писать придется не меньше, чем о поддержке, например, css3, полная поддержка еще стандарта 1.2 с пока еще предварительными спецификациями нигде не реализована. Так же имеется мобильное ответвление этого формата.
Еще раз подчеркну, что в перспективе это не просто формат векторной графики аналогичный аналогичный flash, а некое продолжение html формата для представления графической информации.
С одной стороны понятно, что SVG включает в себя функциональность APNG и MNG, с другой — только в перспективе, так как пока не существует нативной поддержки браузерами внутреннего и внешнего скриптинга SVG. К тому же я не вижу препятствий к тому, чтобы такой же простой как и GIF в поддержке и редактировании формат APNG не прижился.
У нас остается еще одна большая не занятая ниша — открытый и простой в использовании формат хранения видео. Не просто набор кадров сжимаемых по отдельности с учетом разностных кадров (что совершенно бесполезно в случае со сжатием обычного видео). Видео в формате svg, mng и apng будет занимать огромный объем относительно видео пожатых современными видеокодеками.
На данный момент мультимедиа-контент (потоковые аудио и видео) представляет собой включаемые объекты Flash, Flash video, Windows Media и QuickTime и т.д., все они основаны на закрытых стандартах и требуют сторонних плагинов для воспроизведения.
Я не зря в начале упомянул html 5, в котром предусмотрен стандартизированный интерфейс в виде ‹audio› и ‹video› элементов.
В качестве нового независимого стандарта для представления медиаданных W3C предлагает нам:
www.xiph.org/ogg
Контейнер Ogg может включать в себя медиаконтент сжатый различными открытыми и закрытыми кодеками, метаданные и текстовые данные.
В качестве стандарта предполагается нативная поддержка браузерами открытых кодектов Theora для видео, Vorbis (с потерями) и Flac (без потерь) для аудио и возможно Speex, как кодек для человеческой речи.
Основная проблема этого открытого решения заключается в отсутствии широкой поддержки формата метаданных Ogg, например видео проигрыватели просто распаковывают его и смотрят на метаданные составляющих элементов.
Не буду детально рассматривать плюсы и минусы видеокодека Theora, скажу только, что по скорости программного кодирования и декодирования, а так же по соотношению качество/размер он вполне конкурентносопосбен. Аппаратная поддержка кодирования/декодирования пока отсутствует ввиду свежести формата (первый публичный релиз произошел менее года назад), к сожалению, это критично в плане использования кодека Theora большими видеосервисами как Youtube, Vimeo и подобные, а так же использования для онлайн вещания.
В идеале любой популярный браузер встретив тег:
‹video src=lookatthis.[любой видеоформат] width=400 height=300›
должен создать на странице видео-контейнер управляемый через DOM не требуя при этом установки кодеков или плагинов в случае контейнера Ogg содержащего видео сжатое Theora и звук сжатый Vorbis.
На данный момент в том или ином виде поддержка этого решения существует в Opera (Video build), Firefox 3.5 и Google chrome 3.0.182.2. К сожалению, разработчики Webkit (Safari) пошли по своему пути и считают первичной поддержку закрытого кодека mpeg-4 (H.264).
Возможно, что в ближайшем будущем web-мастера смогут вставлять мультимедиа-контент в страницы так же просто, как изображения в формате jpg, а браузеры не будут предлагать нам устанавливать различные плагины для того чтобы просмотреть страницу. Добавится возможность простого сохранения и размещения на сайтах потокового видео без привлечения сторонних сервисов. А любой графический контент, как векторный, так и растровый, будет существовать в компактных, открытых и понятных для большинства браузеров форматах, какими в свое время стали jpeg и gif.
P.S. На Хабрахабре существует два блога, посвященных Ogg и Svg:
habrahabr.ru/blogs/ogg
habrahabr.ru/blogs/svg
Под катом я хочу рассказать про открытые форматы призванные в ближайшем будущем заменить привычные нам gif, jpg, png, swf и flv.
Приведенная картинка имеет формат APNG, в большинстве современных браузеров она будет анимированной и с прозрачной подложкой.
Существует два перспективных ответвления PNG формата:
MNG
www.libmng.com
Плюсы (при полной поддержке):
- Может содержать объекты в формате jpeg или png, с альфа-каналом для каждого из них.
- Внутренний скриптинг и работа со слоями (объектами).
- Сжатие с учетом разностных кадров по аналогии с gif.
- Хороший контроль над ошибками.
- Много дополнительных опций таких как гамма-коррекция, включение текстовая информация и произвольных объектов.
Минусы:
- Сложность формата (существует две спецификации, упрощенная и полная).
- Как следствие, большинство браузеров поддерживают его посредством расширений.
Без дополнительных плагинов этот формат поддерживают mMosaic, Konqueror, с некоторыми глюками старые версии движка Mozilla до 1.4 и браузеры на телефонах Sony-ericsson, почти все остальные браузеры имеют соответствующие расширения, сделанные энтузиастами. Internet Explorer поддерживает его посредством стороннего active-x.
APNG
wiki.mozilla.org/APNG_Specification
Плюсы:
- Может содержать кадры формата png с альфа-каналом и тайминг кадров.
- Надстройка над png с обратной совместимостью, любой браузер с поддержкой png отобразит первый кадр без проблем.
- Сжатие с учетом разностных кадров по аналогии с gif.
- Очень простой формат.
- Поддержка такими браузерами как Firefox 3.0 и Opera 9.5.
Минусы:
- достаточно простой контроль над ошибками (crc для отдельных кадров и количество кадров в заголовке).
Нативно этот формат поддерживают Mozilla firefox 3.0 и выше, Opera 9.5, остальные браузеры с помощью плагинов.
Перейдем к наиболее преспективному, на мой взгляд, формату хранения графических данных.
SVG
www.w3.org/TR/SVG12
en.wikipedia.org/wiki/Scalable_Vector_Graphics
SVG — это уже сложившийся, одобренный W3C и наиболее преспективный открытый стандарт для представления векторной (и не только посредством em)графики. Я бы охарактеризовал его как упрощенный swf, представленный в xml виде.
Основные плюсы:
- Легко редактируемый и наглядный формат на основе xml с богатыми возможностями описания векторной графики на основе открытого стандарта VML (Vector markup language).
- Объекты управляются Javascript или нативным скриптовым языком SMIL.
- Включенность в DOM, то есть в объектную структуру HTML документа, соответственно возможность модификаци изображения посредством CSS или Javascript.
- Возможность включения PNG, GIF и JPG.
Минусы:
- Сложность формата, фактически большинство браузеров с поддержкой SVG поддерживают только упрощенные SVG-Tiny спецификации.
- Большой нативный размер, но эту проблему решает формат-обертка SVGZ, который является SVG сжатым gzip.
Без дополнительных плагинов этот формат версии 1.1 или (DVG-tiny) поддерживают Firefox 2 и выше, Opera и google Chrome. Более подробно по поддержке этого формата различными браузерами писать придется не меньше, чем о поддержке, например, css3, полная поддержка еще стандарта 1.2 с пока еще предварительными спецификациями нигде не реализована. Так же имеется мобильное ответвление этого формата.
Еще раз подчеркну, что в перспективе это не просто формат векторной графики аналогичный аналогичный flash, а некое продолжение html формата для представления графической информации.
С одной стороны понятно, что SVG включает в себя функциональность APNG и MNG, с другой — только в перспективе, так как пока не существует нативной поддержки браузерами внутреннего и внешнего скриптинга SVG. К тому же я не вижу препятствий к тому, чтобы такой же простой как и GIF в поддержке и редактировании формат APNG не прижился.
У нас остается еще одна большая не занятая ниша — открытый и простой в использовании формат хранения видео. Не просто набор кадров сжимаемых по отдельности с учетом разностных кадров (что совершенно бесполезно в случае со сжатием обычного видео). Видео в формате svg, mng и apng будет занимать огромный объем относительно видео пожатых современными видеокодеками.
На данный момент мультимедиа-контент (потоковые аудио и видео) представляет собой включаемые объекты Flash, Flash video, Windows Media и QuickTime и т.д., все они основаны на закрытых стандартах и требуют сторонних плагинов для воспроизведения.
Я не зря в начале упомянул html 5, в котром предусмотрен стандартизированный интерфейс в виде ‹audio› и ‹video› элементов.
В качестве нового независимого стандарта для представления медиаданных W3C предлагает нам:
Ogg контейнер
www.xiph.org/ogg
Контейнер Ogg может включать в себя медиаконтент сжатый различными открытыми и закрытыми кодеками, метаданные и текстовые данные.
В качестве стандарта предполагается нативная поддержка браузерами открытых кодектов Theora для видео, Vorbis (с потерями) и Flac (без потерь) для аудио и возможно Speex, как кодек для человеческой речи.
Основная проблема этого открытого решения заключается в отсутствии широкой поддержки формата метаданных Ogg, например видео проигрыватели просто распаковывают его и смотрят на метаданные составляющих элементов.
Не буду детально рассматривать плюсы и минусы видеокодека Theora, скажу только, что по скорости программного кодирования и декодирования, а так же по соотношению качество/размер он вполне конкурентносопосбен. Аппаратная поддержка кодирования/декодирования пока отсутствует ввиду свежести формата (первый публичный релиз произошел менее года назад), к сожалению, это критично в плане использования кодека Theora большими видеосервисами как Youtube, Vimeo и подобные, а так же использования для онлайн вещания.
В идеале любой популярный браузер встретив тег:
‹video src=lookatthis.[любой видеоформат] width=400 height=300›
должен создать на странице видео-контейнер управляемый через DOM не требуя при этом установки кодеков или плагинов в случае контейнера Ogg содержащего видео сжатое Theora и звук сжатый Vorbis.
На данный момент в том или ином виде поддержка этого решения существует в Opera (Video build), Firefox 3.5 и Google chrome 3.0.182.2. К сожалению, разработчики Webkit (Safari) пошли по своему пути и считают первичной поддержку закрытого кодека mpeg-4 (H.264).
Возможно, что в ближайшем будущем web-мастера смогут вставлять мультимедиа-контент в страницы так же просто, как изображения в формате jpg, а браузеры не будут предлагать нам устанавливать различные плагины для того чтобы просмотреть страницу. Добавится возможность простого сохранения и размещения на сайтах потокового видео без привлечения сторонних сервисов. А любой графический контент, как векторный, так и растровый, будет существовать в компактных, открытых и понятных для большинства браузеров форматах, какими в свое время стали jpeg и gif.
P.S. На Хабрахабре существует два блога, посвященных Ogg и Svg:
habrahabr.ru/blogs/ogg
habrahabr.ru/blogs/svg
