Так уж сложилось, что испокон веков единственный кроссбраузерный способ показать анимацию в браузере без JS — анимированный gif. Был бы JPEG-based аналог — и интернет мог бы быть совсем другим… Современные альтернатипы, например APNG — также работают не везде и со столь же небольшим сжатием, а долгожданный тэг <video> страдает от патентов.

Хочу поделится результатами небольшого академического эксперимента о конвертировании видео в формат SVG (которое затем при везении можно просто показать через <img src="">). Академического — потому что проблемы кросс-браузерной совместимости далеки от решения, и потому в нынешнем виде это едва-ли где-то применимо.

Сначала результат

Счастливые обладатели Firefox сразу могут видеть видео не отходя от кассы, в Chrome — работает только если открыть SVG в отдельном окне. IE требует и открытия в новом окне, и применения встроенного в SVG JS (такой вариант в отдельном окне работает во всех 3-х браузерах, но во встроенном через <img src=""> виде не работает нигде…).

Подходы к реализации

foreignObject
SVG позволяет вставлять внутрь себя произвольный HTML (и не только) код через foreignObject. С его помощью можно вставить внутрь SVG и тэг video/flash-плеер, но работает это все совершенно по разному в разных браузерах. В FF например video работает, а flash ничего не показывает, но играет звук. В Chrome — наоборот, flash работает а video-нет.

Похоже так ничего не выйдет…

base64-jpeg
Уже достаточно давно используют включение base64-encoded картинок внутрь css и svg файлов:

<image id="frame0" width="480" height="201" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]"></image>

Попробуем это использовать. Осталось лишь найти способ показывать картинки по очереди…

SVG SMIL
SMIL (Synchronized Multimedia Integration Language) позволяет нам реализовать нужную анимацию множества встроенных в SVG кадров:

<svg version="1.1" baseProfile="tiny" id="svg-root"   width="100%" height="100%" viewBox="0 0 480 360"   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">      <image id='frame0' width="320" height="240" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]" display='inline'> <set id="show1" attributeName="display" to="inline" begin="0s;show4.end" dur="1s" fill="freeze"/> <set id="hide1" attributeName="display" to="none"  begin="show1.end" dur="0.01s" fill="freeze"/>          </image>    <image id='frame1' width="320" height="240" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]" display='none'> <set id="show2" attributeName="display" to="inline" begin="show1.end" dur="1s" fill="freeze"/> <set id="hide2" attributeName="display" to="none"  begin="show2.end" dur="0.01s" fill="freeze"/>          </image>    <image id='frame2' width="320" height="240" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]" display='none'> <set id="show3" attributeName="display" to="inline" begin="show2.end" dur="1s" fill="freeze"/> <set id="hide3" attributeName="display" to="none"  begin="show3.end" dur="0.01s" fill="freeze"/>          </image>    <image id='frame3' width="320" height="240" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]" display='none'> <set id="show4" attributeName="display" to="inline" begin="show3.end" dur="1s" fill="freeze"/> <set id="hide4" attributeName="display" to="none"  begin="show4.end" dur="0.01s" fill="freeze"/>          </image> </svg> 

Очевидно, это не работает в IE (ни 9 ни 10) — т.к. он не поддерживает SMIL. В Firefox/Chrome это уже работает в отдельном окне, а в FireFox — и в случае встраивания через тэг img.

Встроенный в SVG JavaScript
Сама возможность встраивать JavaScript внутрь картинки меня несколько покоробила.
Тем не менее, такая возможность есть:

<svg> [....] <script type="text/ecmascript"><![CDATA[   var svgDoc;   var desiredFramesPerSecond=12;   var msPerFrame = 1000/desiredFramesPerSecond;   var numFrames = 4;      var frameCt=0;      svgDoc = document.getElementsByTagName("svg")[0];   setTimeout("AnimateEm()",msPerFrame);    function AnimateEm(){     if (frameCt==0) startTime = new Date();     setTimeout("AnimateEm()",msPerFrame);      svgDoc.getElementById('frame'+frameCt.toString()).style.display='none';     frameCt=(frameCt+1)%numFrames;     svgDoc.getElementById('frame'+frameCt.toString()).style.display='inline';   }  ]]></script> </svg>

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

Генерируем наше SVG видео
1. Раздираем avi-файл на изображения:

ffmpeg -i "atari.avi" -r 12 -y -qscale 5 -vf scale=480:-1 -f image2 atari%%03d.jpg 

2. Генерируем svg

php -q convert.php >convert.svg 

<svg version="1.1" baseProfile="tiny" id="svg-root"   width="100%" height="100%" viewBox="0 0 480 201"   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <?  $numFrames = 217; $FPS = 12;  for($i=0;$i<=$numFrames-1;$i++) { ?> <image id="frame<?=$i?>" width="480" height="201" xlink:href="data:image/jpeg;base64,<?=base64_encode(file_get_contents("atari".str_pad(($i+1),3,"0",STR_PAD_LEFT).".jpg"))?>" display="<?=($i==0)?"inline":"none"?>"> <set id="show<?=$i?>" attributeName="display" to="inline" begin="<?=($i==0?"0s;":"")?>show<?=($i+$numFrames-1)%$numFrames?>.end" dur="<?=1/$FPS?>s" fill="freeze"/> <set id="hide<?=$i?>" attributeName="display" to="none"  begin="show<?=$i?>.end" dur="0.01s" fill="freeze"/>       </image> <? } ?> </svg> 

Скачать тестовые картинки и скрипты можно тут.

Надеюсь, более светлые умы хабра смогут улучшить кросс-браузерную совместимость svg-видео, и мы сможем забыть мегабайтные анимированные gif-ы как страшный сон 90-х…