@BarsMonster11 ноя 2012 в 12:33

Конвертируем видео… в SVG

5 мин

27K

JavaScript * Веб-разработка *

+49

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

@GetWindowsDirectory 11 ноя 2012 в 13:24

А где можно сразу посмотреть видео?

@BarsMonster 11 ноя 2012 в 13:26

FireFox/Chrome
FireFox/Chrome/IE JS-based

@vvzvlad 11 ноя 2012 в 13:28

Второй показал нормально.

@crea7or 11 ноя 2012 в 13:54

у меня хром упал на просмотре

НЛО прилетело и опубликовало эту надпись здесь

@wbb 12 ноя 2012 в 10:38

Chrome 23.0.1271.64 показывает нормально.

@ValdikSS 11 ноя 2012 в 15:01

Opera: оба играются нормально

@powder96 11 ноя 2012 в 16:10

Chrome 22.0.1229.96, WinXP SP3:
Первый SVG — показывается первый кадр, а затем падает вкладка.
Второй SVG — работает нормально.

@Anisotropic 11 ноя 2012 в 17:49

~~Что-то ни Хром (23.0.1271.64 m) ни Лиса (17) видео не показывают, показывают только один кадр. Вин7 — 64~~
Оно просто грузится долго, потом всё же показывает, видать хабраэффект…

Ещё оба варианта заработали в Rekonq под Kubuntu 12.10 в виртуалбоксе на вин-7
И второй заработал под IE-10 в win-8RC в виртуалбоксе на вин-7

@Vokabre 11 ноя 2012 в 18:18

Сафари 6.0.2 под OSX 10.8.2, обе ссылки летают.
А Хром 23.0.1271.64, как у всех, уронил вкладку после пары кадров по первой ссылке, но отыграл вторую.

НЛО прилетело и опубликовало эту надпись здесь

@helarqjsc 12 ноя 2012 в 09:45

Звука и не должно быть, автор предлагает это как замену gif.

@id9999 20 ноя 2012 в 13:40

Обе ссылки 404

@BarsMonster 20 ноя 2012 в 23:33

fixed

@vvzvlad 11 ноя 2012 в 13:27

Подумал, показал два кадра, вкладка упала. Chrome 23.0.1271.64, MacOS

@BarsMonster 11 ноя 2012 в 13:28

[deleted]

@vvzvlad 11 ноя 2012 в 13:29

Первый, второй не заметил сразу в тексте(точнее думал что он только для IE). Второй хорошо показывает.

@GetWindowsDirectory 11 ноя 2012 в 13:33

Также падает в Chrome 23.0.1271.64 m Win7

@jeks0n 11 ноя 2012 в 13:41

может мало кого заинтересует, но в Opera хорошо работают оба варианта

@BarsMonster 11 ноя 2012 в 13:43

А через img src?

@dasm32 11 ноя 2012 в 15:36

Да, тоже.

@dasm32 11 ноя 2012 в 18:32

Хотя не всегда. Если открывать html как file:// — то работает, если руками вставить в какую-нибудь страницу — тоже, а вот если отдано, например, с локального веб-сервера — то нет. Примерно так.

@dasm32 12 ноя 2012 в 09:21

Впрочем, Firefox похоже ведет себя также.

@Stom 11 ноя 2012 в 13:44

Оба вариант норм отыграли на Chrome 23.0.1271.64, Ubuntu 12.04

@Duha666 11 ноя 2012 в 13:50

Chrome 23.0.1271.64 Linux Mint 13, работает только второй

@Stom 11 ноя 2012 в 13:54

поправочка: первый вариант тоже не работает, просто сначала я его открыл в отдельном окне, закрыл, а потом чтобы проверить в соседней вкладке, и в этом случае, видать сработал кеш; теперь после сброса кеша первый вариант падает, второй отрабатывает норм

@mayorovp 11 ноя 2012 в 14:01

Чем принципиально отличаются открытие в отдельном окне и в отдельной вкладке? Хром в обоих случаях создает новый процесс.

@Stom 11 ноя 2012 в 14:03

да, вы правы, но падает все равно через раз как-то, в самый первый раз не упал

@mayorovp 11 ноя 2012 в 14:05

Аналогично, у меня тоже в первый раз не упал. Похоже, что процесс падения недетерминирован.

@grishkaa 11 ноя 2012 в 14:19

Оба варианта работают, Opera 12.10, OS X 10.8.2

UPD: работают, но не на максимальной скорости. Открыл в сафари — там FPS выше примерно в 2 раза.

@mwizard 11 ноя 2012 в 14:31

Прочитав тему, посчитал почему-то, что речь об векторной аппроксимации каждого кадра :) Оказалось не так интересно, но все равно хорошо.

@vvzvlad 11 ноя 2012 в 16:09

Связь SVG — вектор сильна. Я тоже так подумал

@deNULL 11 ноя 2012 в 14:37

Chrome 23.0.1271.64, MacOS — полет нормальный.

Но интересно, что нормально показывается (даже без тормозов) в Safari на iOS.

@Fedcomp 11 ноя 2012 в 16:23

Chrome 23.0.1271.64 m win 7 x64 не упал в обоих.

@bolk 11 ноя 2012 в 16:38

А в IE не удаётся скрестить SVG с HTML+TIME?

НЛО прилетело и опубликовало эту надпись здесь

@alexmay 11 ноя 2012 в 16:39

Safari, iPad retina — все Ок

@fuse 12 ноя 2012 в 08:24

понт засчитан

НЛО прилетело и опубликовало эту надпись здесь

@de_arnst 11 ноя 2012 в 17:34

Удивительно, но Chrome for android отработал отлично. Запускал galaxy tab2.

А вот на ноуте вкладка отвалилась спустя пару секунд

@Lexi 11 ноя 2012 в 17:53

> При открытии svg в отдельном окне это работает во всех 3-х браузерах, но при встраивании — ни в одном. Возможно специалисты JS смогут это исправить…

Для встраивания через img, это явно запрещено стандартом. При встраивании через object/embed/iframe ограничения мягче.
Никому ведь не нужно, чтобы простая картинка могла воровать куки или редиректить куда подальше.

@Aux 12 ноя 2012 в 14:34

www.w3.org/TR/SVG/concepts.html

Ничего не запрещено. Правильно бы было выполнять скрипты в IMG и в CSS background с теми же привелегиями, что и скрипты в IFRAME. А сейчас каждый браузер делает что хочет и получается полнейший бардак.

@Lexi 12 ноя 2012 в 17:15

Начните с www.w3.org/Graphics/SVG/WG/wiki/Features/SVG-as-image и по ссылкам:

dev.w3.org/SVG/modules/integration/SVGIntegration.html#referencing_modes
«2.3 Animated Mode
This is the referencing mode that must be supported for the SVG ‘image’ element and is recommended to apply to the HTML ‘img’ element and for use as a Widget icon.
…
script execution no
interactivity no»

> Правильно бы было выполнять скрипты в IMG и в CSS background с теми же привелегиями, что и скрипты в IFRAME
Неправильно. Это позволило бы картинке «редиректить куда подальше», как это можно сделать в ифрейме с top.location.href="http://ya.ru".

@Aux 12 ноя 2012 в 17:35

Ну и к чему эти ссылки? Они WIP и ни к чему не привязаны на данный момент. В спеках — ни слова. RTFM.

@Lexi 12 ноя 2012 в 19:06

Рекомендую последовать собственному совету и поискать в стандарте 2001 года, что-нибудь про модель безопасности. После чего станет ясно почему все браузеры следуют более свежим документам (и здравому смыслу). Что будет в противном случае мы видели совсем недавно.

@dasty 11 ноя 2012 в 18:13

Конечно, это ужасный костыль, но ведь работает!

Печально что с тегом video все так сильно затормозилось, будь они прокляты, эти копирасты.

@bourdine 11 ноя 2012 в 19:11

В итоге удалось выиграть в весе у GIF, насколько стало видео легче?

@BarsMonster 11 ноя 2012 в 19:27

Это видео в формате GIF — 24 Мб, в формате SVG — 2.3Мб, после GZIP сжатия (сервер-то отдает в сжатом виде, а base64 жмется до размера файла до кодирования) — 1.56Мб

Выигрыш по размеру в 15 раз при намного более высоком качестве.

@Evengard 11 ноя 2012 в 20:41

А оригинал-то сколько весит?

@BarsMonster 11 ноя 2012 в 20:44

480x201x3x217 = 62,8Мб, это если считать несжатое видео.

@Evengard 12 ноя 2012 в 07:53

Нет, интересует именно оригинальная сжатая avi-шка.

@vvzvlad 12 ноя 2012 в 15:14

Тогда надо не avi смотреть, а формат ютуба, к примеру.

@ignar 11 ноя 2012 в 21:06

А выложите на Github тогда, раз вы раздаете исходники. Так хотя бы будет возможность улучшить или поддерживать.

@Finom 11 ноя 2012 в 21:57

Можно, кстати, анимировать вертикальный, не прогрессивный спрайт. Кадры будут подгружаться по очереди. Вопрос только один: что делать, если с соединением проблемы.