ऐसा हुआ कि सदियों से जेएस के बिना किसी ब्राउज़र में एनीमेशन दिखाने का एकमात्र क्रॉस-ब्राउज़र तरीका एक एनिमेटेड जिफ है। यदि इसका JPEG- आधारित एनालॉग था - और इंटरनेट पूरी तरह से अलग हो सकता है ... आधुनिक विकल्प, उदाहरण के लिए APNG - हर जगह और केवल कम संपीड़न के साथ काम नहीं करते हैं, और लंबे समय से प्रतीक्षित <वीडियो> टैग पेटेंट से ग्रस्त है।

मैं वीडियो को एसवीजी प्रारूप में परिवर्तित करने पर अपने छोटे अकादमिक प्रयोग के परिणामों को साझा करना चाहता हूं (जो तब, भाग्य के साथ, बस <img src = "">) ​​के माध्यम से दिखाया जा सकता है।

अकादमिक - क्योंकि क्रॉस-ब्राउज़र संगतता की समस्याएं हल होने से दूर हैं, और इसलिए अपने वर्तमान स्वरूप में यह शायद ही कहीं भी लागू हो।

एसवीजी न केवल वेक्टर ग्राफिक्स है, बल्कि उच्च गुणवत्ता वाले वीडियो के 3 या 4 मीटर भी है ...

पहला परिणाम

फ़ायरफ़ॉक्स के खुश मालिक तुरंत बॉक्स ऑफिस को छोड़कर वीडियो देख सकते थे, लेकिन क्रोम - जब परिणामस्वरूप आईवीजी छवि को <img src = ""> के माध्यम से एम्बेड किया जाता है, क्योंकि इसे लेख से हटाया जाना था।

लेकिन आप एसवीजी को एक अलग विंडो में खोल सकते हैं । IE को एक नई विंडो में खोलने और अंतर्निहित SVG JS का उपयोग करने की आवश्यकता है (एक अलग विंडो में यह विकल्प सभी 3 ब्राउज़रों में काम करता है, लेकिन यह कहीं भी अंतर्निहित <img src = ""> ...) में काम नहीं करता है।

आकार : एसवीजी प्रारूप में यह वीडियो 2.3 एमबी लेता है, एक वेब सर्वर द्वारा GZIP संपीड़न के बाद - 1.56 एमबी (बेस 64 एन्कोडिंग से पहले फ़ाइल आकार में दबाया जाता है)। GIF प्रारूप में, एक ही वीडियो 24.1Mb लेता है। इस प्रकार, बेहतर गुणवत्ता के साथ 15 गुना का लाभ।

कार्यान्वयन दृष्टिकोण

foreignObject
एसवीजी आपको विदेशी ओबजेक्ट के माध्यम से मनमाने ढंग से HTML (और न केवल) कोड एम्बेड करने की अनुमति देता है। इसके साथ, आप एसवीजी के अंदर वीडियो / फ्लैश प्लेयर टैग डाल सकते हैं, लेकिन यह विभिन्न ब्राउज़रों में पूरी तरह से अलग तरह से काम करता है। एफएफ में, उदाहरण के लिए, वीडियो काम करता है, लेकिन फ्लैश कुछ भी नहीं दिखाता है, लेकिन यह ध्वनि बजाता है। क्रोम में, इसके विपरीत, फ्लैश काम करता है लेकिन वीडियो नहीं करता है।

ऐसा लगता है कि इसका कुछ नहीं आएगा ...

बेस64 jpeg के माध्यम से निर्मित
काफी समय से वे c64 और svg फ़ाइलों के अंदर बेस 64-एन्कोडेड चित्रों को शामिल करने का उपयोग कर रहे हैं:

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

आइए इसका उपयोग करने का प्रयास करें। यह केवल बारी-बारी से चित्रों को प्रदर्शित करने का एक तरीका खोजने के लिए रहता है ...

एसवीजी एसएमआईएल
SMIL (सिंक्रोनाइज़्ड मल्टीमीडिया इंटीग्रेशन लैंग्वेज) हमें 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 का समर्थन नहीं करता है । फ़ायरफ़ॉक्स / क्रोम में, यह पहले से ही एक अलग विंडो में और फ़ायर्फ़ॉक्स में काम करता है - यहां तक ​​कि आईएमजी टैग के माध्यम से एम्बेड करने के मामले में भी।

IE के लिए SVG जावास्क्रिप्ट में निर्मित
तस्वीर के अंदर जावास्क्रिप्ट को एम्बेड करने की बहुत क्षमता ने मुझे कुछ परेशान किया।
फिर भी, ऐसा अवसर है:

 <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 ब्राउज़रों में काम करता है, लेकिन जब एम्बेडिंग करता है - किसी में नहीं। शायद जेएस विशेषज्ञ इसे ठीक कर सकते हैं ...

हमारे एसवीजी वीडियो बनाएं
1. छवियों में एवी-फ़ाइल के अलावा आंसू:

 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> 

आप यहां परीक्षण चित्र और एक पीढ़ी स्क्रिप्ट डाउनलोड कर सकते हैं ।

मुझे आशा है कि Habr के हल्के दिमाग svg- वीडियो के क्रॉस-ब्राउज़र संगतता में सुधार कर सकते हैं, और हम मेगाबाइट एनिमेटेड gifs को 90 के दशक के बुरे सपने के रूप में भूल सकते हैं ...