Демонстрация Ogg Theora видео в SVG

    Chris Double, занимающийся поддержкой HTML5 тэга <video> для Mozilla Firefox, опубликовал великолепное демо используещее Theora video файлы как живые тестуры в SVG файле (на тему HTML5 тэга <video> я уже писал).

    Вы можете перемещать, поворачивать и изменять размер этих объектов. Выклядит действительно впечатляюще! Обязательно посмотрите видео, сделайте это прямо сейчас ;). via theora.org

    Theora in SVG



    Для этого видео Chris Double модифицировал файл от Vladimir Vukićević. Photos.svg является простой интерпритацией дэмо-видео для технологии Silverlight(Moonlight):

    Дэмо Silverlight



    Photos.svg у меня открылся в Mozilla Firefox 2.0.0.6 и тестовой сборке о которой позже напишу… а также в Opera 9.23, 9.5. В эксперементальной сборке Opera 9.1 (с поддержкой Theora ) файл SVG не работал.

    В новый SVG файл возможность работы с видео была добавлена с помощью <foreignObject>:
    <foreignObject>
    <div xmlns="http://www.w3.org/1999/xhtml">
    <video src="myvideo.ogg"/>
    </div>
    </foreignObject>

    Аудио дорожка включается только у объекта с большим z-index.

    Просмотр SVG файла осуществлён с помощью тестовой сборки Mozilla Firefox. Доступной здесь для Windows, Linux, Mac OS X 10.4. Много реализовано в этой сборке от черновой спецификации html5 тэга <video>. Файл video.svg пока не доступен, но Chris Double обещал его выложить, а пока (списко сайтов)смотрите в сети видео от Ogg Thera с помощью продвинутой сборки Mozilla Firefox или эксперементальной сборки Opera 9.1(устарелая). Wikimedia.org уже выбрала Ogg Thera как основной стандарт.

    Комментарии 36

      +1
      Прикольно. Медлено но верно движемся к WEB 2.0. Только вот JS - мне кажется всё тормозит. Он свои задачи решает. Но решает не элегантно.
      Буду ждать когда появиться фитча. Где есть и компоненты GUI и ООП и статические переменные с классами. Где будут пакеты как в java. Тогда движуха бы пошла. Как было с php. Есть же asp и jsp и perl. Но php популярнее. Потомучто, достаточно прост и удачлив. Аналогично ждём и от WEB. Просто js - был создан для других немножко целей. А вот работа с движением. Drag and Drop. Потоки. Простые многомерные массивы. ООП. Всё это делается очень не красиво на JS. Вот сколько вещей делал на JS. Всегда приходила мысль. Блин но можно было сделать проще :)
      Но это моё мнение!.
        0
        кстати не сказал бы что тут есть что-то WEB 2.0..
        просто xml(svg)+javascript.. Тормозит.. ну да- там ведь происходит параллельное воспроизведение видео файлов+ resize+ накладывание прозрачного слоя, и само видео делается прозразным кроме этого

        насчёт переменных - там всё доступно через DOM, хотя все эти фичи- Drag and Drop и прочее действительно тормознуто ведут себя немного... хотя я бы уже не сказал что всё томрозит... в конкретном примере с photos.svg, вернее тормозит но когда делаешь большого размера и ему надо сделать эту картинку прозрачной.. это уже сам браузер
          0
          Тормозит сам JS.
          А drug and drop - и другие фитчи тормозят. Потомучто, нет двойной буферизации. Во flash - она по умолчанию. В java аплетах, можно реализовать. А в js - нет. Потомуто, js был создан для реализации DHTML. Тоесть там нажал кнопку выскочило сообщение :)
          А вот элементы интерфейса, и анимация. Тут уже другая кухня. И другие языки.
          А ваш пример как не странно достаточно быстро работает. Даже на моём ноуте. Но если взять к примеру игры написанные на Java для мобильников. Сразу становиться понятно. Что всё равно медленно :)
            0
            Простите, а каким боком тут двойная буферизация?
              0
              Так для общего образования!
              http://ru.wikipedia.org/wiki/%D0%94%D0%B…
                0
                Ну разве что в контексте drUg & drop :)
                  0
                  Ну да любая анимация с помощью JS. Достаточно ресурсоёмкая штука. Потомучто, нет прямого доступа к Canvas. А всё делается через DOM и CSS.
                  Поэтому вы координаты изменили элемента. Браузер перерисовывает всё дерево элементов заново.
                  Отсюда и тормоза. Единственный способ этого избежать. Это стандартные элементы GUI. Которые реализованы в самом браузере. Как примеру XUL. Там вроде всё быстро. Но думаю, чёнить придумают пошустрей. Хотя уже придумали там тот-же FLASH. Но он недостаточно гибок.
                    0
                    я думаю flash это не самый подходящий стандарт для веба, веб стандарт должен быть открытым со всеми вытекающими последствиями..
                    а так.. мультики порисовать, да баннеры.

                    сайты на флэш просто ужасно
                      0
                      Кстати flash - открыт:) Вот только Adobe FLash - платный :). Но стандарт открыт.
                      А у flash - есть самая главная проблема. Это отсутствие поддержки HTML и CSS - внутри клипа. Ну тоесть своего рода iframe.
                      А так там всё есть. Но вот редактор типа FCKEditor - на нём не сделаешь.
                      Да кстати вот посмотрите.
                      http://handy-market.ru/dev-close/flash_g…
                      Примеры GUI фреймворка
                        0
                        ну я бы не сказал что он открыт. Вот так взять просто и в буквальном смысле открыть блокнотом swf файл не выйдет. Да и вообще редактором никаким не выйдет.(только если декомпилировать)

                        поисковые системы flash не индексируют.

                        либо мне показалось либо фиг знает о javasript 1.5 или 2.. вот чего можно ждать
                          0
                          А вы об этом? Ну это да. Зато FLASH меньше места занимает. Меньше трафика гонится. Всё в одном файле.
                          Он работает быстрей. Потомучто не тратиться время на парсинг кода.
                          Так что это скорей не минус, а плюс.
                          ДА и потом там есть flex - это короче xml которые делает flash на лету. Как раз его можно там блокнотом поправить
                            0
                            А насчет индексации. Кстати ajax - тоже не индексируется. Так что тут WEB 2.0 - с динамической загрузкой тех же новостей. Сервер не как не проиндексирует :)
                            0
                            да ребята... :)
                            для начала подключите к дискуссии автора поста (http://www.habrahabr.ru/blog/lenta/25035…), он вам расскажет про HTML тэги и СSS подержку в FLASH.
                            О том что скинование CSS уже доступно для FLEX(FLASH) аппликух.

                            А вот и поповоду FCKEditor — http://www.virtub.com/screenshots/images…

                            Online редактор, with multiuser support, на Flash-e.
                            В инете есть больше скриншотов с его возможностями.
                              0
                              меня лично флэш и прочие комерчески проталкиваемые вещи вообще не привлекают, не могу flash принимать как веб-технологию. она с самого начала и не позиционировалась как веб- это была векторная графика+анимация и только потом в нём достаточно развился actionscript.
                                0
                                flash сейчас уже не просто "мультики порисовать, да баннеры.".

                                думаю вы знакомы с Adobe Air.
                                Возможности этой штуки говорят о том, что это Flash — уже полноценная среда программирования определённых задач.
                                Драйвера устройств на нём не попишешь конечно, но в остальном очень даже ничего.

                                Кстати, вроде есть вариант бесплатно получить flash компилятор, вроде в Flex SDK, так что это уже не совсем коммерция.
                                Вы наверняка скажете, что под коммерцией поразумеваете то, чтобы вся работа от начала и доконца была "opensource", и чтобы потом был стандарт. Однако, хочу возразить. Что такая работа — плоха.
                                К примеру, в ролике с программистом Internet Explorer-a — http://www.gotdotnet.ru/Channel9/446995.… — товарищ говорит, что на самом деле стандарта CSS нету, есть только working draft. и кто из двух участников рынка успел реализовать одинаково фичу, та имплементация и принимается за стандарт.
                                Я скажу, что такой стандарт и стандартизация мне не нужена.
                                SVG — с 1999 года, а penetration оставляет жеать лучшего.

                                "Косяк" opensource коммьюнити, то что они нового практически ничего не придумывают, а только идут повеяню рынка, локомотивами которого являются коммерческие разработки.
                                  0
                                  я слежу за развитием css, почитываю статейки которые пишет Хакун Ваум Ли( отец CSS) и я не бы не сказал что css это то что реализуется первыми двумя браузерами. что-то в этом конешно и есть, но то что , кто-то не спешит принимать участие в разработке стандарта.. что ж поделать. в разработке, в работе которая идёт на данный момент может принять любой человек, чем вам не нравиться стандарт полученный данным образом?
                                  сколько браузеров поддерживают CSS3?

                                  вообще это уже отдельлная тема для разговора. думаю каждому из нас есть что сказать, но мне уже просто неудобно печатать в этом маленьком поле для ввода))))
                                    0
                                    посмотрел видео. занятно.
                                    впринципе верю что всё так и обстоит, но, что же они сейчас то только опомнились?? почему не участвовали в разработке стандарта во времена его становления? вобщем я бы сказал после драки кулаками не машут, хотя и не полностью уместно
                                      0
                                      http://www.w3.org/TR/CSS2/
                                      CSS 2 рекомендация с 1998.
                                      Обязательно было ждать MS, чтобы навести порядок? :)

                                      Не факт, что в SVG дела лучше.
                                        0
                                        хм.. вот я заметил что с microsoft стали считаться гараздо менььше, чем например года два назад.. и та штука- 2е программы(по ccs) ещё больше развязывает руки сторонним разработчикам
                                  0
                                  И все же XML как-то идеологичнее что ли...
                                  Весь веб сейчас троиться на XML и внедрять очень далекие от этого технологии нет желания. Все таки простота и совместимость.
                                    0
                                    + СильверЛайта как раз в том, что он на XML(XAML) :)
                                      0
                                      Я знаю, но он не кросплатформенный.
                                        0
                                        под винду его запустили.
                                        на телефонах тоже.
                                        на линуксе тоже.(видео есть)
                                        на макинтошах — http://www.apple.com/downloads/macosx/de…

                                        вам нужен под UltraSparc? :)
                                          0
                                          Нам не нужен пенопласт :)
                                    0
                                    А таблицы там есть?
                0
                Photos.svg работает также в Epiphany, подтверждаю.
                Единственное что — тормозит. Сильно.
                Представить сложно, что будет, если научат всё это работать через OpenGL.
                  0
                  Epiphany тормозит?? в фф и опере не тормозит а подтормаживает я бы сказал...
                  >>научат всё это работать через OpenGL.
                  аппаратное ускорение я думаю в течение 2-3 лет должно появиться.. веб так быстро развивается, посмотрев на это видео можно это заметить, и ускорение всего этого видео картой, наверно было бы кстати!

                  это интересно, но я даже не представляю как вы это себе представляете.. м?
                    0
                    Ну, скажем, свободная реализация Flash'а — Gnash — поддерживает ускорение через OpenGL. MPlayer и XINE умеют выводить видео через OpenGL. Собственно, что мешает реализации?
                  0
                  Есть новая сборка Оперы 9.5 (совсем свежая!) с поддержкой VIDEO.
                  Поддержка VIDEO пока только для Винды... статья
                    0
                    * This build of Opera also supports video in SVG, and the 3d canvas
                      0
                      огромное спасибо
                        0
                        Внимание! Эта сборка (9644) из параллельной ветки разработки, так что разработчики не советуют её ставить поверх текущей 9624. В следующих "традиционных" сборках VIDEO не будет — всё это пока что экперимент.
                      0
                      Скачать демку VIDEO+SVG можно отсюда (109 МБ)

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое