हाल ही में, हम एनीमेशन के बजाय वीडियो और स्प्राइट एनीमेशन के बजाय वीडियो के उपयोग का अध्ययन कर रहे हैं। हम इस तरह के वीडियो को इंटरेक्टिव वीडियो कहते हैं।
पारंपरिक स्प्राइट एनीमेशन: बड़ी डिस्क स्थान, धीमी डाउनलोडिंग, विशेष रूप से ऑनलाइन प्लेबैक, धीमी होगी
ऑनलाइन खेलते समय बहुत सारी फाइलें, बहुत सारे http अनुरोध, धीमी प्रतिक्रिया या असामान्य व्यवहार का कारण बनेंगे। इसलिए, स्प्राइट एनीमेशन को वीडियो से बदलने के लिए प्रौद्योगिकी का एक सेट विकसित करने की तत्काल आवश्यकता है। हम इस तरह के वीडियो को इंटरेक्टिव वीडियो कहते हैं
पारंपरिक वीडियो के साथ समस्याएं:
1. केवल एक चौकोर आकार के क्षेत्र में खेला जा सकता है
2. iPad के तहत, यह खेलने के लिए एक खिड़की है, और iPhone के तहत, यह केवल पूर्ण स्क्रीन में खेला जा सकता है।
3. खेलते समय, यह निश्चित रूप से सबसे आगे दिखाई देगा
इंटरएक्टिव वीडियो में निम्नलिखित विशेषताएं हैं:
IPhone के तहत, फुल-स्क्रीन प्लेबैक की आवश्यकता नहीं है, इसे एक क्षेत्र में खेला जा सकता है
इंटरएक्टिव वीडियो सामान्य ग्राफिक ऑब्जेक्ट्स के नीचे दिखाई दे सकता है
इंटरएक्टिव वीडियो में एक मुखौटा हो सकता है, ताकि वीडियो की पृष्ठभूमि को हटाया जा सके और वीडियो और साधारण ग्राफिक ऑब्जेक्ट्स को एकीकृत किया जा सके
सारांश: चलाने के लिए उपयोग किए जाने वाले वीडियो के लिए, हम इसे पारंपरिक वीडियो के रूप में सेट करेंगे। उन वीडियो के लिए जिन्हें विशिष्ट उद्देश्यों के लिए उपयोग करने की आवश्यकता होती है, हम उन्हें इंटरैक्टिव वीडियो के रूप में सेट करते हैं। शोध के प्रारंभिक परिणाम सामने आए हैं। वैसे, यह अगले कुछ वर्षों में मोबाइल H5 के ऑडियो और वीडियो विकास में आने वाली वास्तविक समस्याओं का सार प्रस्तुत करता है और अपने स्वयं के समाधान प्रदान करता है। अंतिम वास्तविक प्रभाव पर एक नज़र डालें: पीसी (>आईई 9), आईफोन, आईपैड, एंड्रॉइड 5.0 . के साथ संगत
IPhone पर मैन्युअल, स्वचालित और विंडोिंग की समस्याओं को हल करें, और यह कर सकता है मूल रूप से वास्तविक उत्पादन में उपयोग किया जाता है। दाईं ओर मूल वीडियो mp4 फ़ाइल है, बाईं ओर का वीडियो एनीमेशन को बदल देता है, और फिर पृष्ठभूमि मास्क प्रभाव का समर्थन करता है, आधार मानचित्र को प्रकट कर सकता है, और इंटरैक्टिव संचालन की एक श्रृंखला का समर्थन करता है।
H5 ऑडियो
हर बार जब कोई ऑडियो ऑब्जेक्ट नए ऑडियो के माध्यम से पारित किया जाता है, तो IOS पर एक नया धागा देखा जा सकता है।
समाधान: एक नया ऑडियो ऑब्जेक्ट, विभिन्न ऑडियो पतों को बदलकर, अधिक थ्रेड न खोलने के लक्ष्य को प्राप्त करता है।
Android पर समर्थन अच्छा नहीं है
समाधान: Android के निचले संस्करण पर समस्या हल नहीं हुई है। आम तौर पर, मिश्रित विकास को अंतर्निहित इंटरफ़ेस को समायोजित करके नियंत्रित किया जा सकता है, जैसे कि फोनगैप
IPhone पर ऑटो नहीं चला सकते
समाधान: iPhone पर स्वचालित प्लेबैक एक प्रक्रिया है जब IOS को डिज़ाइन किया गया था। ऐसा लगता है कि यातायात की स्वचालित चोरी को रोकना है।
सीधे शब्दों में कहें, इसे उपयोगकर्ता को अनुकरण करके मैन्युअल रूप से ट्रिगर करने की आवश्यकता है, इसलिए हमें शुरुआत में कोड के इस टुकड़े को कॉल करने की आवश्यकता है:
कोड को कॉपी करें
// उस समस्या को ठीक करें जो ios ब्राउज़र स्वचालित रूप से ऑडियो नहीं चला सकता है। लोड करते समय नया ऑडियो बनाएं और इसका उपयोग करते समय src को बदलें।
Xut.fix = Xut.fix || {};
अगर (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = गलत
वर फिक्सऑडियो = फ़ंक्शन () {
अगर (!इसऑडियो) {
ऑडियो = सच;
Xut.fix.audio = नया ऑडियो ();
document.removeEventListener ('टचस्टार्ट', फिक्सऑडियो, झूठा);
}
};
दस्तावेज़।
}
ऊपर दिए गए कोड को कॉपी करें
यदि आप इस तरह के कोड को बॉडी से बाइंड करते हैं: मैन्युअल रूप से ट्रिगर करके एक ऑडियो ऑब्जेक्ट बनाएं, और फिर इसे ग्लोबल में सेव करें
जब निम्नानुसार उपयोग किया जाता है:
कोड को कॉपी करें
// यदि आप ios ब्राउज़र के लिए src निर्दिष्ट करने के लिए Xut.fix.audio का उपयोग करते हैं, तो कृपया आरंभीकरण के लिए app.js देखें।
अगर (Xut.fix.audio) {
ऑडियो
=
Xut.fix.ऑडियो;
ऑडियो.src = url;
और} {
ऑडियो = नया ऑडियो (url);
}
ऑडियो.ऑटोप्ले = सच;
ऑडियो.प्ले ();
बस ऑडियो ऑब्जेक्ट को बदलें। सीधे शब्दों में कहें, यह उपयोगकर्ता द्वारा खेलने के लिए ट्रिगर द्वारा बनाई गई वस्तु होनी चाहिए।
H5 वीडियो ऑडियो
मोबाइल टर्मिनल पर वीडियो टैग का शायद ही कभी उपयोग किया जा सकता है, Android समर्थन बहुत खराब है, नेत्रहीन 5.0 बेहतर है। IPhone पर पुरानी समस्या को स्वचालित रूप से नहीं चलाया जा सकता (डेटा सहेजें, अपनी बहन को बचाएं !!!), और खेलने के लिए डिफ़ॉल्ट पूर्ण-स्क्रीन नियंत्रण है। लंबे समय तक, मैंने इस वीडियो प्रोसेसिंग को अनदेखा किया। एंड्रॉइड नीचे की परत का उपयोग करता है, iPhone सीधे VideoJS, अंतर्निहित फ्लैश और एच 5 स्विच का उपयोग करता है, फ्लैश में भी समर्थन समस्याएं हैं। कुछ समय पहले, बॉस की एक मांग थी। हमने बहुत सारे एनिमेशन लागू किए, उनमें से सभी स्प्राइट मार्गों के संयुक्त एनिमेशन थे, एक ऐप के तहत सैकड़ों मेगाबाइट से लेकर सैकड़ों मेगाबाइट तक थे, इसलिए छवियों को संपीड़ित करने के लिए एक समाधान की तत्काल आवश्यकता है। अंतिम समाधान एनीमेशन के बजाय वीडियो का उपयोग करना है, क्योंकि वीडियो संपीड़न तकनीक कई वर्षों से विकसित की गई है और बहुत परिपक्व है। अब वीडियो कम्प्रेशन तकनीक 720P को आसानी से कन्वर्ट कर सकती है। हाई-डेफिनिशन फिल्में, 10M/मिनट, या 160K/सेकंड तक संकुचित। छवि अनुक्रम का फ़ाइल आकार कम से कम कई दस गुना छोटा है। इसी समय, अधिकांश डिवाइस वीडियो के हार्डवेयर अपघटन का समर्थन करते हैं, जिससे कि वीडियो प्लेबैक की सीपीयू खपत बहुत कम है, बैटरी की खपत भी बहुत कम है, और प्लेबैक की गति भी तेज है। यहां तक कि 25 फ्रेम का फुल-स्क्रीन प्लेबैक आसानी से हासिल किया जा सकता है।
योजना को अंतिम रूप दिया गया है, और हल की जाने वाली कई समस्याएं यहां हैं।
वीडियो में कुछ वस्तुओं सहित संपूर्ण वीडियो, उपयोगकर्ता क्लिक, स्लाइड और iPhone के तहत अन्य कार्यों का जवाब दे सकता है, एक खिड़की में खेला जा सकता है, पृष्ठभूमि को फ़िल्टर कर सकता है, और इसका उपयोग पीएनजी छवि की तरह किया जा सकता है। वीडियो एनीमेशन को बदल देता है, और फिर पृष्ठभूमि मुखौटा प्रभाव का समर्थन करता है, जो मूल छवि को प्रकट कर सकता है, और मैनुअल, स्वचालित और अपूर्ण स्क्रीन की समस्या को भी हल करता है
iPhone विंडोिंग
समाधान: कैनवास + वीडियो टैग के माध्यम से प्रसंस्करण को मिलाएं
सिद्धांत: वीडियो का मूल चित्र फ़्रेम प्राप्त करें और इसे कैनवस के माध्यम से पृष्ठ पर ड्रा करें
यहां मैं सीधे स्रोत कोड संलग्न करता हूं, कोड सामान्य रूप से लिखा जाता है, लेकिन कुछ प्रमुख बिंदुओं पर प्रकाश डाला जाता है
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
एनीमेशन के बजाय वीडियो
यह थोड़ा बोझिल है। छवि को नियंत्रित करने के उद्देश्य को प्राप्त करने के लिए इसे इंटरैक्टिव होने और कैनवास को खींचने की आवश्यकता है। मैंने अभी तक यह सब लिखना समाप्त नहीं किया है, और सामान्य कंपनी की ज़रूरतों में यह नहीं होगा। यहां एक संक्षिप्त विवरण दिया गया है, इसे कैनवास + वीडियो द्वारा भी संसाधित किया जाता है, लेकिन एक कैश्ड कैनवास कंटेनर को प्रीप्रोसेसिंग करने की आवश्यकता होती है। प्रीप्रोसेसिंग के माध्यम से, प्रत्येक तस्वीर के पिक्सल प्राप्त करें, और प्रत्येक पिक्सेल आरबीजी के मूल्य को बदलकर, यह पृष्ठभूमि को फ़िल्टर कर सकता है, ताकि इसे पीएनजी छवि की तरह इस्तेमाल किया जा सके। मैं इसे बाद में लिखूंगा और इसे ~~ प्रकाशित करूंगा
हमारे अन्य उत्पाद:
