Apple JPEG, JSON और <कैनवास> का उपयोग करके वीडियो को एन्कोड करता है

^{अनलॉक_001 . jpg फ़ाइल का एक टुकड़ा}

वेब तकनीकों को विकसित करने में Apple का व्यापक अनुभव है, लेकिन अब यह एक बेतुकी स्थिति में है। यदि आप iPhone डिज़ाइन नवाचारों के विवरण के साथ पृष्ठ पर जाते हैं, तो आप कुछ अजीब देख सकते हैं: iPhone अनलॉक एनीमेशन वाला वीडियो कई असामान्य दिखने वाली JPEG फ़ाइलों का उपयोग करके एन्कोड किया गया है।

सवाल उठता है: यह कैसे काम करता है? और अगर आप मानक <वीडियो> टैग का उपयोग कर सकते हैं तो ऐसी चालों का सहारा लें।

स्पष्टीकरण सरल है। यह पता चला है कि iPhone पर, <video> टैग केवल पूर्ण-स्क्रीन मोड में काम करता है, इसलिए Apple किसी पृष्ठ पर वीडियो डालने के लिए इसका उपयोग नहीं कर सकता है। इसके अलावा, Apple विशेष रूप से H.264 वीडियो का उपयोग करता है, और सभी ब्राउज़र इसका समर्थन नहीं करते हैं, जो प्रोमो पृष्ठ के लिए अस्वीकार्य है।

Apple ने एनीमेशन के प्रत्येक फ्रेम के लिए JPEG बनाकर इस समस्या को हल किया, जिसके परिणामस्वरूप 5 एमबी पर दो सेकंड का एनीमेशन प्राप्त हुआ। अब उन्होंने अनुकूलन किया है: आकार में सिर्फ एक मेगाबाइट वाले iPhone 5 एनीमेशन में पांच फाइलें शामिल हैं:

www.apple.com/iphone/design/images/unlock/unlock_manifest.json
www.apple.com/iphone/design/images/unlock/unlock_keyframe.jpg
www.apple.com/iphone/design/images/unlock/unlock_001.jpg
www.apple.com/iphone/design/images/unlock/unlock_002.jpg
www.apple.com/iphone/design/images/unlock/unlock_endframe.jpg

ऑपरेशन एल्गोरिथ्म को ac_flow.js फ़ाइल में वर्णित किया गया है और यह इस तथ्य पर आधारित है कि ट्रैफ़िक को बचाने के लिए छवि का केवल एक हिस्सा अपडेट किया गया है। unlock_001.jpg और unlock_002.jpg में ये अद्यतन किए गए छवि टुकड़े हैं। unlock_manifest.json फ़ाइल में भागों को रखने के लिए निर्देशांक होते हैं। समग्र चित्र को खराब करने से JPEG की कलाकृतियों को रोकने के लिए, Apple 8x8 पिक्सेल ब्लॉकों का उपयोग करता है, जैसा कि JPEG कोडेक करता है। उपरोक्त फ़ाइलें unlock_001.jpg और unlock_002.jpg , वास्तव में, 8x8 ब्लॉकों की एक सतत धारा के रूप में उपयोग की जाती हैं। स्ट्रीम को संसाधित करने के निर्देश बेस 64 प्रारूप में अलग से दर्शाए गए हैं, जिन्हें डिकोड किया जाना चाहिए:



प्रत्येक निर्देश में पांच बाइट्स होते हैं, पहले तीन बाइट्स कैनवास में लक्ष्य के निर्देशांक को इंगित करते हैं, और अंतिम दो बाइट्स - कितने ब्लॉक वहां लगाने के लिए। उदाहरण के लिए, AAxAC निर्देश का मतलब है कि आपको दो ब्लॉक (एसी) लेने की जरूरत है और उन्हें स्थिति 49 (एएएक्स) पर रखें।

वीडियो को असेंबल करने के लिए इस तरह के एक एल्गोरिथ्म के साथ, ब्लॉक का पुन: उपयोग करने का कोई तरीका नहीं है, लेकिन स्वयं प्रकट होना काफी संक्षिप्त है।

dbloom के माध्यम से